<!--
 * @Author: 15097322811 1447934599@qq.com
 * @Date: 2024-01-16 10:17:30
 * @LastEditors: 15097322811 1447934599@qq.com
 * @LastEditTime: 2024-02-07 10:05:28
 * @Description: 
-->
<template>
    <view class="home-page">
      <!-- <view class="flxd-img flxd-img-0">新手教程</view> -->
      <view class="flxd-img flxd-img-1" @click="
        daojushow = true;
      getCard();
      ">
        <image src="../../static/image/enimg/drawing2.png" mode=""></image>
        <!-- <u-badge type="error" :count="cardList.length" class="dot-red"></u-badge> -->
  
        <text class="dot-red" v-if="cardList.length > 0">{{ cardList.length }}</text>
      </view>
      <view class="flxd-img flxd-img-2" @click="
        couponshow = true;
      getYouhui();
      ">
        <image src="../../static/image/enimg/drawing3.png" mode=""></image>
        <text class="dot-red" v-if="couponList.length > 0">{{ couponList.length }}</text>
      </view>
      <view v-for="(tong, index) in tongView" :key="index" :class="tong.level_name == '史诗'
          ? 'tong-view tong-view-ssbg'
          : 'tong-view tong-view-csbg'
        " @click="openTong(tong)">
        <view class="tong-view-text" @click="openTong(tong)">{{ tong.text }}</view>
        <image :src="tong.goods_image" class="tong-gd-img" mode="scaleToFill" @click="openTong(tong)"></image>
  
<!--        <view class="text-gd-img" v-if="tong.level_name == '史诗'" style="color: #ef2a2a">
          <image src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240109/43b9a16489a48d2e647d2272e01db860.png"
            mode="scaleToFill"></image>
        </view>
        <view class="text-gd-img" v-if="tong.level_name == '传说'" style="color: #eb6c0a">
          <image src="http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240109/53f32f05e931318581bf08f075b12e29.png"
            mode="scaleToFill"></image>
        </view>
        <view class="text-gd-img" v-if="tong.level_name == '稀有'" style="color: #eb6c0a">
          <image src="/static/image/xiyou.png" mode="scaleToFill"></image>
        </view> -->
      </view>
      <view class="play-btn" @click.stop="$.to('/pages/my/agreement?type=play_agreement')">{{$t('玩法介绍')}}</view>
      <view class="top-view" :style="{
        height: CustomBarRpx + 80 + 'rpx',
        paddingTop: StatusBarRpx + 'rpx',
        background: backgroundBar,
      }">
        <view class="icon_setUp">
          <image src="../../static/image/6.png" mode="heightFix" style="height: 30rpx"></image>
        </view>
        <view class="logoName">
          <view class="logoName_left">{{ appName || "" }}</view>
          <!-- #ifdef APP-PLUS -->
          <view class="logoName_right" @click="wxKefu">
            <image src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01nKtG3S2JfEvEqAOvc_!!2215984279448.png"
              mode="widthFix"></image>
          </view>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <view class="logoName_right">
            <button class="kf-button" open-type="contact">
              <image src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01nKtG3S2JfEvEqAOvc_!!2215984279448.png"
                mode="widthFix"></image>
            </button>
          </view>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <view class="logoName_right" @click="openServer">
            <image src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01nKtG3S2JfEvEqAOvc_!!2215984279448.png"
              mode="widthFix"></image>
          </view>
          <!-- #endif -->
        </view>
      </view>
      <view :style="{
        height: CustomBarRpx + 100 + 'rpx',
        paddingTop: StatusBarRpx + 'rpx',
      }"></view>
  
      <view class="left-music">
        <image :class="muteBgMusic ? 'music stop' : 'music'" :src="muteBgMusic
          ? 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing136eef561718eee2a9.png'
          : 'https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/drawing6.png'
        " mode="" @click="
        playMusic();
      bf_anjianyin();
      "></image>
      </view>
  
      <view class="banner">
        <view class="banner-box">
          <swiper class="swiper" circular :autoplay="true">
            <swiper-item v-for="(item, idx) in bannerlist" :key="idx" @tap.stop="gotobanner(item)">
              <image :src="item.image" mode="" style="width: 100%; height: 100%"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>
  
      <view class="tabView">
        <view class="tabView-0" @click="openMrPeople">
          <view class="tabView-0-0">{{ UserDayMoney }}/198</view>
          <view class="tabView-0-1" v-if="UserDayMoney < 198">{{$t('还差')}}{{ (198 * 1000 - UserDayMoney * 1000) / 1000 }}{{$t('元领取奖励')}}
          </view>
          <view class="tabView-0-1" v-else>{{$t('已达成消费，即可领取奖励')}}</view>
        </view>
        <view class="tabView-1" @click="goDailyLimit"></view>
      </view>
      <view class="newView">
        <view class="card-title">
          <view class="card-title-0"></view>
          <view class="card-title-1"></view>
          <view class="card-title-2">
            {{$t('新人专享')}}
            <text>NEW USER SPECIFIC</text>
          </view>
        </view>
  
        <view class="newView-item newView-item-1" @click="lookbox(xinrenMhBimaibox.box_info, 5)"
          v-if="xinrenMhBimaibox && xinrenMhBimaibox.box_info">
          <image src="https://v3mh6.oss-cn-beijing.aliyuncs.com/dingdang_newui/2.gif" mode="scaleToFill"></image>
        </view>
  
        <view class="newView-item newView-item-2" @click="lookbox(maiyisongyiBox.box_info, 6)"
          v-if="maiyisongyiBox && maiyisongyiBox.box_info">
          <view class="newView-item-2-left">
            <image :src="maiyisongyiBox.box_info.image" mode="scaleToFill"></image>
          </view>
          <view class="newView-item-2-right">
            <view class="n-r-0">
              <image src="../../static/image/enimg/O1CN017J90FT2JfEv6PHSzB___2215984279448.png"
                mode="widthFix"></image>
              {{ maiyisongyiBox.box_info.title }}
            </view>
            <view class="n-r-1">{{ maiyisongyiBox.box_info.info }}</view>
            <view class="n-r-2">
              <view class="n-r-2-0">
                {{$t('劵后')}}{{$t('¥')}}
                <text style="font-size: 40rpx; font-weight: bold">
                  {{ floatInt(maiyisongyiBox.box_info.price) }}
                </text>
                <!-- <text class="del-text">{{$t('¥')}}{{ floatInt(presentMh.xinren_blindbox_info.price, 0) * 1.4 }}</text> -->
              </view>
              <view class="n-r-2-1">{{ maiyisongyiBox.box_info.xiaoliang || 0 }}{{$t('人喜欢')}}</view>
            </view>
          </view>
        </view>
      </view>
  
      <view class="boxList">
        <view class="card-title">
          <view class="card-title-0"></view>
          <view class="card-title-1"></view>
          <view class="card-title-2">
            {{$t('热销盲盒')}}
            <text>HOT SALE BOX</text>
          </view>
        </view>
  
        <!-- <view class="boxList-item boxList-item-img">
                  <image src="https://z4a.net/images/2023/10/30/1697803436479.png" mode="widthFix"></image>
              </view> -->
  
        <!-- 今日限定 -->
  
        <!-- 白嫖盒子 -->
  
        <view v-for="(box, index) in allmhBox" :key="index">
          <!-- 白嫖盒子 -->
          <view class="boxList-item boxList-item-bg" style="
              background-image: url('../../static/image/enimg/O1CN014uoIsB2JfEvyLZCFx___2215984279448.png');
            " v-if="box.source === 7 && box && box.box_info.status == 1" @click="lookbox(box.box_info, 7)">
            <view class="baipiaoBox">
              <view class="xiangouBox-0">
                {{$t('限购')}}
                <text>{{ box.source_info.lucky_buy_num_limit }}</text>
                {{$t('次')}}
              </view>
              <view class="xiangouBox-1">{{$t('已购')}}{{ box.source_info.count }}/{{
        box.source_info.lucky_buy_num_limit
      }}{{$t('次')}}</view>
            </view>
            <view class="boxList-item-left">
              <image :src="box.box_info.image" mode="scaleToFill"></image>
            </view>
            <view class="boxList-item-right">
              <view class="b-b-0">{{ box.box_info.title }}</view>
              <view class="b-b-1">{{ box.box_info.info }}</view>
              <view class="b-b-2">
                <!-- <view class="b-b-2-time">01:54:44</view> -->
                <view class="b-b-2-price b-b-2-price-baipiao">
                  <view class="b-r-3-0">
                    <text style="color: #d35365; margin-right: 10rpx">
                      {{$t('¥')}}
                      <text style="font-size: 38rpx; font-weight: bold">0</text>
                      <!-- <text style="font-size: 38rpx; font-weight: bold" v-else>{{ floatInt(box.price, 0) }}</text> -->
                    </text>
                    <!-- 	<template v-if="box.is_coupon">
                                         {{$t('¥')}}{{ floatInt(box.box_info.price) * 1.4 }}
                                      </template> -->
                  </view>
                  <view class="b-r-3-1">{{ box.box_info.xiaoliang || 0 }}{{$t('人喜欢')}}</view>
                </view>
              </view>
            </view>
          </view>
          <!-- 今日限定 -->
          <view class="boxList-item boxList-item-bg" :style="{
        'background-image': 'url(' + box.source_info.week_info.img + ')',
      }" v-if="box.source === 8" @click="lookbox(box.source_info.week_info, 8)">
            <view class="dayBox">{{ getToday() }}{{$t('限定')}}</view>
            <view class="xiangouBox" :style="{ color: color }">
              <view class="xiangouBox-0">
                {{$t('限购')}}
                <text>{{ box.source_info.box_limit_num }}</text>
                {{$t('次')}}
              </view>
              <view class="xiangouBox-1">{{$t('已购')}}{{ box.source_info.week_info.count }}/{{
        box.source_info.week_info.box_limit_num
      }}{{$t('次')}}</view>
            </view>
            <view class="boxList-item-left">
              <image :src="box.box_info.image" mode="scaleToFill"></image>
            </view>
            <view class="boxList-item-right">
              <view class="b-b-0">{{ box.source_info.week_info.title }}</view>
              <view class="b-b-1">{{ box.source_info.week_info.sub_title }}</view>
              <view class="b-b-2">
                <view class="b-b-2-time">
                  <u-count-down :timestamp="remainingSeconds" separator-size="16" separator-color="#fff" color="#fff"
                    font-size="18" bg-color="transparent" class="u-count-down-view"></u-count-down>
                </view>
                <view class="b-b-2-price">
                  <view class="b-r-3-0">
                    <text style="color: #d35365; margin-right: 10rpx">
                      <template v-if="box.source_info.week_info.type === 1">
                        {{$t('¥')}}
                        <!-- <text style="font-size: 38rpx; font-weight: bold">{{ box.source_info.week_info.amount }}</text> -->
                        <text style="font-size: 38rpx; font-weight: bold">{{
        box.source_info.price
      }}</text>
                      </template>
                      <!-- 2.聚划算 -->
                      <template v-if="box.source_info.week_info.type === 2">
                        {{$t('¥')}}
                        <text style="font-size: 38rpx; font-weight: bold">{{
        floatInt(box.source_info.price, 0)
      }}</text>
                        <text class="labei-text del-text" style="margin-left: 6px; color: #999999">{{$t('¥')}}{{
          box.source_info.old_price }}</text>
                        <!-- <text class="labei-text">{{ box.source_info.v2_type === 1 ? `折扣${box.source_info.week_info.zhekou}` : `优惠${box.source_info.week_info.youhuijine}` }}</text> -->
                      </template>
                      <template v-if="box.source_info.week_info.type === 3">
                        {{$t('¥')}}
                        <text style="font-size: 38rpx; font-weight: bold">{{
        floatInt(box.box_info.price, 0)
      }}</text>
                        <text class="labei-text">（{{ box.source_info.week_info.beishu }}{{$t('倍送')}}）</text>
                      </template>
                      <template v-if="box.source_info.type === 4">
                        {{$t('¥')}}
                        <text style="font-size: 38rpx; font-weight: bold">{{
        floatInt(box.source_info.week_info.first_beishu)
      }}</text>
                        <text class="labei-text del-text" style="margin-left: 6px; color: #999999">{{$t('¥')}}{{
          box.source_info.old_price }}</text>
                        <!-- <text class="labei-text">（{{ box.source_info.week_info.first_num }}抽起购）</text> -->
                      </template>
                      <template v-if="box.source_info.week_info.type === 5">
                        {{$t('¥')}}
                        <text style="font-size: 38rpx; font-weight: bold">{{
        floatInt(box.box_info.price, 1)
      }}</text>
                        <text class="labei-text">（{{$t('得')}}{{ box.source_info.week_info.zsnum }}{{$t('抽')}}）</text>
                      </template>
                      <template v-if="box.source_info.type === 6">
                        <text style="font-size: 26rpx">{{$t('¥')}}</text>
                        <text style="font-size: 38rpx; font-weight: bold">{{
        floatInt(box.box_info.price)
      }}</text>
                        <text class="labei-text">（{{$t('买')}}{{ box.source_info.week_info.buy_num }}{{$t('送')}}{{
        box.source_info.week_info.zsbuy_num
      }}）</text>
                      </template>
                      <!-- <text style="font-size: 38rpx; font-weight: bold">{{ floatInt(jdBox.source_info.price, 0) }}</text> -->
                    </text>
                    <!-- <template v-if="box.is_coupon">
                                          {{$t('¥')}}{{ box.source_info.week_info.price }}
                                      </template> -->
                  </view>
                  <view class="b-r-3-1">{{ box.box_info.xiaoliang || 0 }}{{$t('人喜欢')}}</view>
                </view>
              </view>
            </view>
          </view>
  
          <!-- 普通盒子 -->
          <view class="boxList-item" @click="lookbox(box.box_info)" v-if="box.source === 0 && box.box_info">
            <view class="boxList-item-left">
              <image :src="box.box_info.image" mode="scaleToFill"></image>
            </view>
            <view class="boxList-item-right">
              <view class="b-r-0">{{ box.box_info.title }}</view>
              <view class="b-r-1">{{ box.box_info.info }}</view>
              <view class="b-r-2">
                <view>{{ box.box_info.label }}</view>
              </view>
              <view class="b-r-3">
                <view class="b-r-3-0">
                  <text style="color: #d35365; margin-right: 10rpx">
                    <text style="font-size: 38rpx; font-weight: bold" v-if="box.is_coupon">
                      <text style="font-size: 26rpx">{{$t('券后')}}{{$t('¥')}}</text>
                      {{ floatInt(box.coupon_price) }}
                    </text>
                    <text style="font-size: 38rpx; font-weight: bold" v-else>{{$t('¥')}}{{ floatInt(box.price) }}</text>
                  </text>
                  <template v-if="box.is_coupon">
                    <text class="del-text">{{ floatInt(box.price) }}</text>
                  </template>
                </view>
                <view class="b-r-3-1">{{ box.box_info.xiaoliang || 0 }}{{$t('人喜欢')}}</view>
              </view>
              <view class="b-r-4">
                <view class="b-r-4-0">{{$t('商品价值')}}</view>
                <view class="b-r-4-1">{{ floatInt(box.box_info.min_goods_price) }}-{{
        floatInt(box.box_info.max_goods_price)
      }}{{$t('元')}}</view>
              </view>
              <view class="b-r-5">
                <image :src="item.image" v-for="item in box.box_info.goods_list.slice(0, 5)" :key="item.id"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- #ifdef MP-WEIXIN -->
      <!-- <view class="xf-tip" v-if="isLogin==false">
              <u-checkbox shape="circle" v-model="agreeChecked" active-color="#9400D3">
              </u-checkbox>
              <view class="agreeText">我已阅读 <text class="book-style" @click="openAgree">《用户协议》</text>，<text
                      @click="openAgree" class="book-style">《隐私协议》</text>并同意授权获得本机号码</view>
              <button open-type="getPhoneNumber" @getphonenumber="login" class="xf-tip-btn">
                  同意并授权
              </button>
              <AgreePop :show="showAgree" @close="showAgree = false" />
          </view> -->
      <!-- #endif -->
  
      <!-- 底部新人 -->
      <view style="height: 120rpx" v-if="isSuspended"></view>
      <view class="suspended-view" v-if="isSuspended">
        <image class="icon-close" src="http://mhimg.69box.cn/kaixiang/down.png" mode="" @click="isSuspended = false">
        </image>
        <!-- <u-icon name="close-circle" color="#fff" size="60rpx" @click="closeAlert"></u-icon> -->
        <!-- <u-icon name="close-circle-fill" size="50rpx" color="#898b8d"suspended-view></u-icon> -->
        <image src="https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01hbdHch2JfEv7CsnTf_!!2215984279448.png"
          mode="widthFix" class="widthImg" @tap.stop="lookbox(xinrenMhBimaibox.box_info, 5)"></image>
      </view>
  
      <u-tabbar v-model="current" :list="tabbar" :mid-button="box_view"></u-tabbar>
  
      <!-- <u-popup v-model="pop_is_open" mode="center" @close="pop_is_open = false">
              <view class="pop-up-gonggao">
                  <view class="pop-up-bg">
                      <image :src="pop_bg" mode="aspectFit"></image>
                  </view>
                  <view class="pop-content">
                      <u-parse :html="pop_content"></u-parse>
                  </view>
              </view>
          </u-popup> -->
  
      <u-modal v-model="go_new_amp_open" :content="$t('该小程序已不可用,是否前往新小程序')" :show-cancel-button="true"
        @confirm="go_new_amp()"></u-modal>
  
      <u-popup v-model="isDailyhave" mode="bottom" border-radius="20">
        <view class="dailyhave">
          <view class="dailyhave-title"></view>
          <scroll-view scroll-y="true" class="dailyhave-body-y">
            <view class="dailyhave-body">
              <view class="dailyhave-body-0">
                <view class="dailyhave-body-0-0">
                  <u-icon name="clock"></u-icon>
                  <u-count-down :timestamp="remainingSeconds" separator-size="24" separator-color="#fff" color="#fff"
                    font-size="26" bg-color="transparent" class="u-count-down-view"></u-count-down>
                  {{$t('后重置')}}
                </view>
                <view class="dailyhave-body-0-1">
                  <view class="progress">
                    <view class="progress-active" :style="{
        width:
          UserDayMoney >= 690
            ? '100%'
            : UserDayMoney / 100 + 'rpx',
      }"></view>
                    <text class="progress-text">{{$t('已消费')}}{{ UserDayMoney }}{{$t('元')}}</text>
                    <view :class="'progress-cj progress-cj-' + (3 - z)" v-for="(money, zix) in userTaskList" :key="zix">
                      <image
                        src="https://img.alicdn.com/imgextra/i2/2215984279448/O1CN01FBqd0Q2JfEvKB9Jnn_!!2215984279448.png">
                      </image>
                      <text>{{ money.money }}</text>
                    </view>
                  </view>
                </view>
                <view class="dailyhave-body-0-2">
                  <text style="color: #d64425" v-if="UserDayMoney < 198">{{$t('还差')}}{{
        (198 * 1000 - UserDayMoney * 1000) / 1000
      }}{{$t('元领取奖励')}}</text>
                  <view style="color: #d64425" v-else>{{$t('已达成消费，即可领取奖励')}}</view>
                </view>
              </view>
  
              <view class="dailyhave-body-1 dReward" v-for="dataItem in userTaskList" :key="dataItem.id">
                <view class="dReward-title">{{$t('达到')}}{{ dataItem.money }}{{$t('元领取')}}</view>
                <view class="dReward-list">
                  <view class="dReward-list-item" v-for="(item, z) in dataItem.item" :key="z">
                    <image
                      src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01kanNal2JfEvU1x0Hq_!!2215984279448.png"
                      class="d-i-img" v-if="item.type == 1"></image>
                    <image
                      src="http://yiruanmhweixin-tongbayun.oss-cn-beijing.aliyuncs.com/uploads/20230312/ff98dfc5d7d1ec9568d0fcda3a421938.png"
                      class="d-i-img" style="padding: 15rpx; box-sizing: border-box" v-if="item.type == 2"></image>
                    <image
                      src="../../static/image/enimg/2215984279448.png"
                      class="d-i-img" v-if="item.type == 3"></image>
                    <image
                      src="https://img.alicdn.com/imgextra/i4/2215984279448/O1CN012mvDLB2JfEvmlxIkn_!!2215984279448.png"
                      class="d-i-img" v-if="item.type == 4"></image>
                    <view class="d-i-content">
                      <view class="d-i-content-0">{{ item.type_text }}*{{ item.num }}</view>
                      <view class="d-i-content-1" v-if="item.type == 1">{{$t('无门槛优惠劵，大额满减劵')}}</view>
                      <view class="d-i-content-1" v-if="item.type == 2">{{$t('开盒不满意，免费重抽')}}</view>
                      <view class="d-i-content-1" v-if="item.type == 3">{{$t('有机会开出大奖噢')}}~</view>
                      <view class="d-i-content-1" v-if="item.type == 4">{{$t('余额可用于抽盒与购物')}}</view>
                      <view class="d-i-content-2" @click="lookReward(item, dataItem)">{{$t('查看详情')}} ></view>
                    </view>
                    <view class="d-i-status d-i-status-active" v-if="item.lock == 1">{{$t('已领取')}}</view>
                    <view class="d-i-status" v-if="item.lock == 0 &&
        UserDayMoney < floatInt(dataItem.money, 0)
        ">{{$t('未解锁')}}</view>
                    <view class="d-i-status" v-if="item.lock == 0 &&
        UserDayMoney >= floatInt(dataItem.money, 0)
        ">{{$t('待领取')}}</view>
                    <!-- <view class="d-i-status" v-if="item.lock == 0">待领取</view> -->
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <!-- 详情 -->
        <u-popup v-model="DailyhaveDetails" mode="center" border-radius="10">
          <view class="DailyhaveDetails-close">
            <u-icon name="close-circle" color="#fff" size="80" @click="DailyhaveDetails = false"></u-icon>
          </view>
          <view class="DailyhaveDetails-view">
            <view class="DailyhaveDetails-view-0">
              <image src="../../static/image/enimg/O1CN019Wi9572JfEviU3l0E___2215984279448.png"
                mode=""></image>
            </view>
            <view class="DailyhaveDetails-view-youhui">
              <template v-if="AlertType == 1">
                <view class="d-v-y-item" v-for="item in DailyhaveDetailsyouhui" :key="item.id">
                  <view class="d-v-y-item-areaa">{{$t('优惠券')}}</view>
                  <view class="d-v-y-item-left">
                    <text>
                      <template v-if="item.type == 1">{{$t('¥')}}{{ item.amount || "" }}</template>
                      <template v-if="item.type == 2">{{ item.discount }}{{$t('折')}}</template>
                    </text>
                  </view>
                  <view class="d-v-y-item-right">
                    <view class="d-v-y-item-right-0">{{ item.name }}</view>
                    <view class="d-v-y-item-right-1">{{ item.type_text }}</view>
                  </view>
                </view>
              </template>
              <template v-if="AlertType == 2">
                <view class="ccz-View">
                  <image
                    src="http://yiruanmhweixin-tongbayun.oss-cn-beijing.aliyuncs.com/uploads/20230312/ff98dfc5d7d1ec9568d0fcda3a421938.png"
                    mode=""></image>
                  <text>x{{ cckNum }}</text>
                </view>
                <view class="ccz-View-text">
                  <text>{{$t('使用说明')}}：</text>
				  {{$t('如您对开盒奖品不满意，在开盒结果页使用重抽卡免费重抽')}}
                </view>
              </template>
              <template v-if="AlertType == 3">
                <view class="ccz-View">
                  <image
                    src="https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01vzzxXs2JfEvN9NQve_!!2215984279448.png"
                    mode=""></image>
                  <text>x{{ cckNum }}</text>
                </view>
                <view class="ccz-View-text">
                  <text>{{$t('使用说明')}}：</text>
                 {{$t('领取后可前往“仓库-盒子”查看')}}
                </view>
              </template>
            </view>
  
            <view class="DailyhaveDetails-no-btn DailyhaveDetails-no-btn-active" v-if="Alertlock == 1">{{$t('已领取')}}</view>
            <view class="DailyhaveDetails-no-btn" v-if="Alertlock == 0 && UserDayMoney < floatInt(lockMoeny, 0)"
              @click="openUnlock">{{$t('未解锁')}}</view>
            <view class="DailyhaveDetails-no-btn" v-if="Alertlock == 0 && UserDayMoney >= floatInt(lockMoeny, 0)"
              @click="openUnlock">{{$t('立即领取')}}</view>
            <!-- UserDayMoney < lockMoeny -->
          </view>
        </u-popup>
      </u-popup>
  
      <!-- 优惠券弹窗 -->
      <u-popup v-model="couponshow" mode="center" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }">
        <view class="newPeopleBox">
          <view class="newmainBox">
            <scroll-view scroll-y class="youhuilist" v-if="couponList.length > 0">
              <view class="youhuibox" v-for="(item, idx) in couponList" :key="idx">
                <view class="left">
                  <view>
                    <view class="name">{{ item.name }}</view>
                    <view class="price1" v-if="item.threshold_type == 2">{{$t('无门槛')}}</view>
                    <view class="price1" v-if="item.threshold_type == 1 && item.join_type == 1">
                      <block v-if="item.type == 1">{{$t('满')}}{{ item.threshold_money }}{{$t('可用')}}</block>
                      <block v-if="item.type == 2">{{ item.discount }}{{$t('折')}}</block>
                    </view>
                    <view class="price1" v-if="item.threshold_type == 1 && item.join_type == 2">{{$t('盲盒专享')}}</view>
                    <!-- <view class="name">{{ item.name }}</view>
                                      <view class="price1" v-if="item.threshold_type == 1">无门槛</view>
                                      <view class="price1" v-if="item.threshold_type == 2 && item.join_type == 1">满{{ item.threshold_money }}可用</view>
                                      <view class="price1" v-if="item.threshold_type == 2 && item.join_type == 2">盲盒专享</view> -->
                  </view>
                </view>
                <view class="right">
                  <view>
                    <view class="price">
                      <template v-if="item.type == 1">{{$t('¥')}}{{ item.amount }}</template>
                      <template v-if="item.type == 2">{{ item.discount }}{{$t('折')}}</template>
                    </view>
                    <!-- <view class="ling active" @click="receive(item.id, item.is_lingqu, idx)">领取</view> -->
                    <!-- <view class="ling" :class="item.is_lingqu == 0 ? 'active' : 'yiling'" @click="receive(item.id, item.is_lingqu, idx)">
                                          {{ item.is_lingqu == 0 ? '领取' : '已领取' }}
                                      </view> -->
                  </view>
                </view>
              </view>
            </scroll-view>
            <view class="youhuilist" v-else>
              <u-empty :text="$t('暂无可领取的优惠券')" mode="coupon"></u-empty>
            </view>
          </view>
          <view class="btm-2" style="ma">
            <image class="btmBg" src="http://mhimg.69box.cn/kaixiang/rv.webp" mode="widthFix"></image>
            <view class="btn1">
              <image v-if="couponList.length > 0" @click="receive(1)" src="http://mhimg.69box.cn/kaixiang/sd.png"
                mode="widthFix"></image>
            </view>
          </view>
  
          <view class="off">
            <image @click="couponshow = false" src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
          </view>
        </view>
      </u-popup>
      <!-- 新人优惠券弹窗 -->
      <u-popup v-model="newcouponshow" mode="center" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }">
        <view class="newPeopleBox newPeopleBox_1">
          <view class="newmainBox">
            <scroll-view scroll-y class="youhuilist">
              <view class="youhuibox" v-for="(item, idx) in newCouponList" :key="idx">
                <view class="left">
                  <view>
                    <view class="name">{{ item.name }}</view>
                    <view class="price1" v-if="item.threshold_type == 2">{{$t('无门槛')}}</view>
                    <view class="price1" v-if="item.threshold_type == 1 && item.join_type == 1">
                      <block v-if="item.type == 1">{{$t('满')}}{{ item.threshold_money }}{{$t('可用')}}</block>
                      <block v-if="item.type == 2">{{$t('折扣')}}{{ item.discount }}</block>
                    </view>
                    <view class="price1" v-if="item.threshold_type == 1 && item.join_type == 2">{{$t('盲盒专享')}}</view>
                  </view>
                </view>
                <view class="right">
                  <view>
                    <view class="price">
                      <template v-if="item.type == 1">{{$t('¥')}}{{ item.amount }}</template>
                      <template v-if="item.type == 2">{{ item.discount }}{{$t('折')}}</template>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
          <view class="btm-2" style="ma">
            <image class="btmBg" src="http://mhimg.69box.cn/kaixiang/rv.webp" mode="widthFix"></image>
            <view class="btn1">
              <image @click="receive(3)" src="http://mhimg.69box.cn/kaixiang/sd.png" mode="widthFix"></image>
            </view>
          </view>
  
          <view class="off">
            <image @click="newcouponshow = false" src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
          </view>
        </view>
      </u-popup>
  
      <!-- 道具卡 -->
      <u-popup v-model="daojushow" mode="center">
        <view class="box11">
          <view class="daojubox">
            <view class="top">
              <image :src="isCard
          ? '../../static/image/qp.png'
          : '../../static/image/qn.png'
        " mode="widthFix"></image>
              <view class="rulebox" v-if="isCard" @click="go_prop_card_rule">
                <view class="wen">?</view>
                {{$t('使用规则')}}
              </view>
            </view>
            <view v-if="isCard">
              <scroll-view scroll-y style="height: 755rpx; width: 100%; margin-top: 30rpx">
                <view class="cardList">
                  <view class="list" v-for="(item, idx) in cardList" :key="idx">
                    <view class="goods n-flex-row">
                      <view class="picbox">
                        <image :src="item.card_data.image" mode=""></image>
                      </view>
                      <view class="textbox">
                        <view class="tit">
                          {{ item.card_data.title }}
                        </view>
                        <view class="two">{{ item.card_data.introduce }}</view>
                        <view class="qi n-flex-row n-justify-between">
                          <view>{{$t('领取时间')}}:{{
        $u.timeFormat(
          item.create_time,
          "yyyy-mm-dd hh:MM:ss"
        )
      }}</view>
                        </view>
                      </view>
                    </view>
                    <view class="tip1">
                      {{ item.introduce }}
                    </view>
                  </view>
                </view>
                <u-empty :text="$t('暂无道具卡')" mode="favor" color="#766ed0" icon-color="#766ed0" :show="cardShow"></u-empty>
              </scroll-view>
            </view>
  
            <view v-else class="explain">
              <view class="tit">
                ♦
                <text>{{$t('重抽卡')}}</text>
                ♦
              </view>
              <scroll-view scroll-y class="text" style="height: 560rpx">{{$t('内容')}}</scroll-view>
              <view class="btm">
                <view class="btn2" @click="isCard = true">{{$t('我知道了')}}</view>
              </view>
            </view>
          </view>
          <view class="off">
            <image @click="daojushow = false" src="http://mhimg.69box.cn/kaixiang/down.png" mode=""></image>
          </view>
        </view>
      </u-popup>
  
      <!-- 中奖详情 -->
      <u-popup v-model="tongShow" mode="center" :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }"
        :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.9)' }">
        <view class="tongShowView">
          <view class="tongShowView-0">{{ tongObj.username }}</view>
          <view class="tongShowView-1">
            <u-divider bg-color="transparent" color="#f5ebc3" border-color="#f5ebc3">{{$t('获得')}}</u-divider>
          </view>
          <view class="tongShowView-2">
            <view class="tongShowView-2-img">
              <image :src="tongObj.goods_image" mode=""></image>
            </view>
            <view class="tongShowView-2-text">{{ tongObj.goods_name }}</view>
          </view>
          <view class="tongShowView-3" @click="tongShow = false">{{$t('我也要玩')}}</view>
        </view>
      </u-popup>
  
      <!-- 广告唐窗 -->
      <u-popup z-index="999999999" v-model="showAlert" v-if="alertInfo" mode="center"
        :custom-style="{ backgroundColor: 'rgba(0, 0, 0, 0)' }" :mask-custom-style="{ background: 'rgba(0, 0, 0, 0.9)' }">
        <view class="alertView">
          <view class="alertView-close">
            <u-icon name="close-circle" color="#fff" size="60rpx" @click="closeAlert"></u-icon>
          </view>
          <view class="alertView-img" @click="gotobanner(alertInfo)">
            <image :src="alertInfo.image" mode="widthFix"></image>
          </view>
        </view>
      </u-popup>
  
      <uni-popup ref="popupLimits" type="top" heigth="200" :is-mask-click="false" @maskClick="popupClcik">
        <view class="qweqwe">
          <view>{{$t('申请手机或耳机的麦克风权限')}}</view>
          <view>{{$t('申请相册权限')}}</view>
        </view>
      </uni-popup>
    </view>
  </template>
  
  <script>
  import NavBar from "@/uni_modules/zhouWei-navBar/components/zhouWei-navBar/zhouWei-navBar.vue";
  import { box_view, home_control, app_name } from "@/utils/keyControl.js";
  import { tabbar } from "@/common/tabbar.js";
  const anniumusic = uni.createInnerAudioContext();
  import config from "../../utils/config.js";
  const anjianyin = config.baseUrl + "/static/api/video/anjian.mp3";
  // 自定义导航栏组件
  // #ifdef APP-PLUS
  var qiyuModule = uni.requireNativePlugin("Netease-QiyuModule");
  const modal = uni.requireNativePlugin("modal");
  import { qy_appKey } from "@/utils/keyControl.js";
  // #endif
  export default {
    components: {
      NavBar,
    },
    data() {
      return {
        progressWidth: "",
        DailyhaveDetails: false,
        DailyhaveDetailsyouhui: [], // 优惠券
        appName: null,
        couponshow: false, //优惠券弹窗
        daojushow: false, //道具卡弹窗
        couponList: [], //优惠券列表
        cardList: [], //道具卡
        isCard: true, //我的道具卡与使用规则切换
        cardShow: false,
        isDailyhave: false,
        backgroundBar: "transparent",
        noticeList: [
          {
            id: "1",
            titile: "这里是第1条通知公告的内容",
          },
          {
            id: "2",
            titile: "这里是第2条通知公告的内容",
          },
        ],
        scrollTop: 0,
        old: {
          scrollTop: 0,
        },
        current: 0,
        tabbar: tabbar,
        showAgree: false,
        agreeChecked: false,
        statusBarHeight: 0,
        MangheType: [],
        current: 0,
        prizeList: [],
        swiperCurrentId: 0,
        newPropelBox: null,
        muteBgMusic: false,
        mhImg: null,
        allmhBox: [],
        pnoneNum: "",
        bannerlist: [],
        share_ma: "",
        isLogin: false,
        tongView: [], //需要展示的数据。
        tongList: [], //中奖通知
        tong: null,
        tnoTime: null,
        dings: "",
        newBoxObj: null,
        aaa: 0,
        windTime: null,
        pop_is_open: false,
        pop_bg: "",
        pop_content: "",
        new_amp_appid: "",
        go_new_amp_open: false,
        StatusBar: null,
        CustomBar: null,
        StatusBarRpx: null,
        CustomBarRpx: null,
        isSuspended: true,
        xinrenMh: {
          xinren_blindbox_info: {},
        }, // 新人活动
        presentMh: {
          xinren_blindbox_info: {},
        }, // 买一送一
        todayBox: [],
        userLuckyMh: null, // 白嫖盒子
        remainingSeconds: 0, // 今日倒计时
        userTaskList: [], // 每日必领
        UserDayMoney: 0, // 今日消费
        Alertlock: 0,
        AlertType: null,
        cckNum: 0, // 重抽卡数量
        couponCount: 0, // 优惠券数量
        lockId: null, // 需要解锁的id
        lockType: null, //解锁类型
        lockMoeny: null, // 解锁的价格
        isnewBimai: 1, // 新人必买
        isnewmaiyi: 1, // 新人买一送一
        newCouponList: [],
        newcouponshow: false,
        weekday: 0,
        color: [],
        xinrenMhBimaibox: null, //新人必买盲盒
        maiyisongyiBox: null, // 新人买一送一
        tongShow: false, // 查看中奖详情
        tongObj: {
          username: "",
          goods_image: "",
          goods_name: "",
        }, //中奖详情
        alertList: [],
        showAlert: false,
        alertInfo: null,
        alertIdx: 0,
        isPcOpen: uni.getStorageSync("isPcOpen"),
        box_view: false,
      };
    },
    onLoad(option) {
      this.box_view = box_view;
      this.isCleanToken();
      this.getAlert();
      let getToday = new Date().getDay(); // 获取今天是一周中的第几天（0-6）
      let color = [
        "#5249ff",
        "#db48ff",
        "#ffbd4c",
        "#49a7ff",
        "#cdde67",
        "#f85367",
        "#d6e668",
      ];
      this.color = color[getToday];
      // #ifdef APP-PLUS
      let geiNetwork = setTimeout(
        uni.onNetworkStatusChange(function (res) {
          if (res.isConnected) {
            uni.reLaunch({
              url: "/pages/tabBar/home",
            });
            // this.$router.go(0)
            clearTimeout(geiNetwork);
            // push.getClient();
            // push.init();
          }
        }),
        1000
      );
      // #endif
      let codeMa = uni.getStorageSync("share_ma");
      if (option.share_ma) {
        this.share_ma = option.share_ma;
        uni.setStorageSync("share_ma", option.share_ma);
      }
      if (codeMa) {
        this.share_ma = codeMa;
      }
      uni.$on("music", (data) => {
        this.muteBgMusic = data;
      });
      this.muteBgMusic = uni.getStorageSync("muteBgMusic");
      anniumusic.src = anjianyin;
      // this.getManghe();
      // this.tongz();
      this.get_general();
      // #ifdef MP-WEIXIN
      this.pd_amp();
      // #endif
      this.getHeight();
      this.getCard();
      this.getSpecialsubjectList();
      // this.getUSerTasks();
    },
    onPageScroll(e) {
      if (e.scrollTop >= 50) {
        this.backgroundBar = "#ffffff";
      } else {
        this.backgroundBar = "transparent";
      }
    },
  
    onShow() {
      this.alertIdx = uni.getStorageSync("alertIdx");
      let userInfo = uni.getStorageSync("user");
      if (this.alertIdx < this.bannerlist.length) {
        this.closeAlert();
      }
      // this.uni.setStorageSync('alertIdx' , this.alertIdx)
      this.muteBgMusic = uni.getStorageSync("muteBgMusic");
      // const isPlay
      this.getManghe();
      this.getYouhui();
      this.getTong();
      // #ifdef APP-PLUS
      this.initSetUserInfo(userInfo);
      // this.getMessageCount()
      // #endif
      this.getBanner();
  
      // this.getCard();
      // this.getYouhui();
      this.getYouhui_new();
      // this.getNewPeopleList();
      // this.getDayBox();
      this.getDayEndTime();
      //获取手机状态栏高度
      this.statusBarHeight =
        uni.getSystemInfoSync()["statusBarHeight"] !== 0
          ? uni.getSystemInfoSync()["statusBarHeight"] + 88 + 44
          : 88;
      if (uni.getStorageSync("user").id) {
        this.isLogin = true;
        this.getUserMoney();
      }
      // #ifdef APP-PLUS
      // this.testSetUserInfo();
      // this.getMessageCount()
      // #endif
      // this.windTime = setInterval(() => {
      // 		this.colrdo()
      // 	}, 2000)
    },
    onHide() {
      clearInterval(this.windTime);
      clearInterval(this.tnoTime);
      // this.closeMusic();
    },
    watch: {
      current(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      muteBgMusic(newValue, oldValue) {
        if (newValue) {
          // 开启静音
          this.$music.playBgm({
            mute: true,
          });
        } else {
          // 关闭 静音
          this.$music.playBgm({
            mute: false,
          });
        }
      },
    },
    methods: {
      /* 用于判断是否绑定手机  没有绑定手机直接清空token */
      isCleanToken() {
        // #ifdef APP-PLUS
        let userInfo = uni.getStorageSync("user");
        if (!userInfo.mobile) {
          uni.removeStorageSync("user");
          uni.removeStorageSync("user_token");
          uni.$emit("updataUser");
        }
        // #endif
      },
      openTong(obj) {
        this.tongObj = obj;
        this.tongShow = true;
      },
      getToday() {
        const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        const today = new Date().getDay();
        const limit = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]; // 周几限定条件
        if (limit.includes(days[today])) {
          // 匹配限定条件
          return days[today];
        } else {
          return "";
        }
      },
      // 查看每日限领详情
      lookReward(obj, parentobj) {
        // 1优惠券  2重抽卡  3 盲盒 4 余额
        this.Alertlock = obj.lock;
        this.AlertType = obj.type;
        this.lockId = parentobj.id;
        this.lockMoeny = parentobj.money;
        this.lockType = obj.type;
        const type = obj.type;
        if (type === 1) {
          this.DailyhaveDetailsyouhui = obj.couponList;
          this.DailyhaveDetails = true;
        }
        if (type === 2) {
          this.DailyhaveDetails = true;
          this.cckNum = obj.num;
        }
        if (type === 3) {
          this.DailyhaveDetails = true;
          this.cckNum = obj.num;
          // this.lookbox({ id: obj.info });
        }
      },
      /* 解锁任务 */
      openUnlock() {
        const lockMoeny = this.floatInt(this.lockMoeny, 0);
        if (this.UserDayMoney < lockMoeny) {
          return this.$tip.tip(this.$t("未达到解锁条件"));
        }
        this.$http({
          url: "api/member/get_task_info",
          data: {
            task_id: this.lockId,
            type: this.lockType,
          },
        }).then((res) => {
          if (res.data.code == 1) {
            // this.$tip.tip(res.data.msg);
            // this.couponshow = false;
            this.getUSerTasks();
            this.DailyhaveDetails = false;
            this.$tip.tip(this.$t("已解锁"));
          } else {
            this.$tip.tip(res.data.msg);
          }
        });
      },
      // 领取全部优惠券
      receive(atype) {
        this.$http({
          url: "api/member/receive_coupon",
          data: {
            a_type: atype,
          },
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.$tip.tip(res.data.msg);
              this.couponshow = false;
              this.newcouponshow = false;
              this.getYouhui();
            } else {
              this.$tip.tip(res.data.msg);
            }
          })
          .catch((err) => { });
      },
      getYouhui() {
        this.$http({
          url: "api/common/get_coupon",
          data: {
            uid: uni.getStorageSync("user").id,
            a_type: 1,
          },
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.couponList = res.data.data;
              // this.couponCount = res.data.data.length;
            }
          })
          .catch((err) => { });
      },
      /* 新人优惠券 */
      getYouhui_new() {
        this.$http({
          url: "api/common/get_coupon",
          data: {
            uid: uni.getStorageSync("user").id,
            a_type: 3,
          },
        })
          .then((res) => {
            if (res.data.code == 1) {
              if (res.data.data.length > 0) {
                this.newCouponList = res.data.data;
                // this.newcouponshow = true;
                this.isShowXr();
              }
              // couponshow = true
            }
          })
          .catch((err) => { });
      },
      isShowXr() {
        if (!document.cookie.includes("xr=")) {
          this.setcookie("xr");
          this.newcouponshow = true;
        } else {
          this.newcouponshow = false;
        }
      },
      getCard() {
        this.$http({
          url: "api/member/get_my_card",
        })
          .then((res) => {
            if (res.data.code == 1) {
              if (res.data.data.length == 0) {
                this.cardShow = true;
              } else {
                this.cardShow = false;
              }
              this.cardList = res.data.data;
            } else {
              this.cardShow = true;
            }
          })
          .catch((err) => { });
      },
      //前往查看道具卡规则
      go_prop_card_rule() {
        uni.navigateTo({
          url: "/pages/my/agreement?type=prop_card_rule",
        });
      },
      getDayEndTime() {
        // 获取当前日期和时间
        const now = new Date();
  
        // 设置目标时间为今天的最后一刻
        const targetTime = new Date(
          now.getFullYear(),
          now.getMonth(),
          now.getDate(),
          23,
          59,
          59
        ).getTime();
  
        // 计算时间差，单位为秒
        const remainingSeconds = Math.floor((targetTime - now.getTime()) / 1000);
        this.remainingSeconds = remainingSeconds;
      },
      /* 字符串转小数 */
      floatInt(val, length = 1) {
        let f = parseFloat(val);
        let result = f.toFixed(length);
        return result;
      },
      /* 获取首页活动盲盒列表 */
      getNewPeopleList() {
        let userInfo = uni.getStorageSync("user");
        this.$http({
          url: "/api/common/get_new_user_buy_open",
          data: {
            uid: userInfo.id || "",
          },
        }).then((res) => {
          this.xinrenMh = res.data.data.xinren;
          this.presentMh = res.data.data.present;
          this.userLuckyMh = res.data.data.user_lucky;
          this.isnewBimai = res.data.data.xinren.new_user_buy_open;
          this.isnewmaiyi = res.data.data.present.new_user_present_open;
        });
      },
  
      /* 获取专题活动 */
      getSpecialsubjectList() {
        this.$http({
          url: "/api/common/get_zhuanti",
        }).then((res) => {
          // this.xinrenMh = res.data.data.xinren
          // this.presentMh = res.data.data.present
        });
      },
      /* 获取今日盲盒列表 */
      getDayBox() {
        let userInfo = uni.getStorageSync("user");
        const today = new Date().getDay(); // 获取今天是一周中的第几天（0-6）
        const weekday = today === 0 ? 7 : today;
        this.$http({
          data: {
            week_day: weekday,
            member_id: userInfo.id || "",
          },
          url: "/api/common/get_present_list",
        }).then((res) => {
          this.todayBox = res.data.data;
          // this.xinrenMh = res.data.data.xinren
          // this.presentMh = res.data.data.present
        });
      },
      /* 获取每日必领 */
      getUSerTasks() {
        uni.showLoading();
        this.$http({
          url: "/api/common/get_user_tasks",
          data: {
            uid: uni.getStorageSync("user").id || "",
          },
        }).then((res) => {
          uni.hideLoading();
          this.userTaskList = res.data.data;
        });
      },
      openMrPeople() {
        uni.showLoading();
        this.$http({
          url: "/api/common/get_user_tasks",
          data: {
            uid: uni.getStorageSync("user").id || "",
          },
        }).then((res) => {
          uni.hideLoading();
          this.userTaskList = res.data.data;
          this.isDailyhave = true;
        });
      },
  
      /* 获取今日消费 */
      getUserMoney() {
        this.$http({
          url: "api/member/get_day_money",
        }).then((res) => {
          this.UserDayMoney = parseFloat(res.data.data.money);
          // this.userTaskList = res.data.data;
        });
      },
      getHeight() {
        let _that = this;
        uni.getSystemInfo({
          success: function (e) {
            let StatusBar = 0,
              CustomBar = 0,
              CustomVal = 0,
              StatusBarRpx = 0,
              CustomBarRpx = 0,
              unitRatioVal = 0;
            // #ifndef MP
            StatusBar = e.statusBarHeight;
            if (e.platform == "android") {
              CustomBar = e.statusBarHeight + 50;
            } else {
              CustomBar = e.statusBarHeight + 45;
            }
            // #endif
            // #ifdef MP-WEIXIN
            StatusBar = e.statusBarHeight;
            let custom = wx.getMenuButtonBoundingClientRect();
            CustomVal = custom;
            CustomBar = custom.bottom + custom.top - e.statusBarHeight;
            // #endif
            // #ifdef MP-ALIPAY
            StatusBar = e.statusBarHeight;
            CustomBar = e.statusBarHeight + e.titleBarHeight;
            // #endif
            let unitRatio = 750 / uni.getSystemInfoSync().windowWidth;
            StatusBarRpx = StatusBar * unitRatio;
            CustomBarRpx = CustomBar * unitRatio;
            unitRatioVal = unitRatio;
            _that.StatusBar = StatusBar; //状态栏高度(px)
            _that.CustomBar = CustomBar; //整个标题栏高度(px)
            _that.StatusBarRpx = StatusBarRpx; //状态栏高度(rpx)
            _that.CustomBarRpx = CustomBarRpx; //整个标题栏高度(rpx)
          },
        });
      },
      gotobanner(info) {
        this.showAlert = false;
        //指定盲盒跳转
        if (info.link_url_type == 1) {
          uni.navigateTo({
            url:
              "/pages/home/kaixiang?id=" +
              info.link_url +
              "&music=" +
              this.muteBgMusic,
          });
        }
        //跳转外部网站
        if (info.link_url_type == 2) {
          uni.navigateTo({
            url: "/pages/tabBar/h5",
          });
          setTimeout(() => {
            uni.$emit("go_h5", {
              url: info.link_url,
            });
          }, 600);
        }
        /* 内部网站跳转 */
        if (info.link_url_type == 3) {
          /* 纯展示 */
          if (info.link_url == 2000) {
            this.closeAlert();
            return false;
          }
          /* 旧的首页 */
          if (info.link_url == 2001) {
            uni.switchTab({
              url: "/pages/tabBar/old_home",
            });
            return false;
          }
          /* 白嫖 */
          if (info.link_url == 2002) {
            uni.navigateTo({
              url: "/pagesA/pages/my/baipiao",
            });
            return false;
          }
          /* 白嫖 */
          if (info.link_url == 2003) {
            uni.navigateTo({
              url: "/pagesA/pages/my/dailyLimit",
            });
            return false;
          }
        }
        // 4 跳转新闻页面
        if (info.link_url_type == 4) {
          uni.navigateTo({
            url: `/pagesA/pages/my/newsContent?id=${info.news_id}`,
          });
          return false;
        }
        // 5 跳转活动盲盒
        if (info.link_url_type == 5) {
          if (info.source === 8) {
            /* 今日限定活动需要zid */
            uni.navigateTo({
              url:
                "/pages/home/kaixiang?id=" +
                info.box_id +
                "&music=" +
                this.muteBgMusic +
                "&boxSource=" +
                info.source +
                "&zid=" +
                info.z_id,
            });
          } else {
            uni.navigateTo({
              url:
                "/pages/home/kaixiang?id=" +
                info.box_id +
                "&music=" +
                this.muteBgMusic +
                "&boxSource=" +
                info.source,
            });
          }
          return false;
        }
      },
      pd_amp() {
        this.$http({
          data: {
            amp_appid: uni.getAppBaseInfo().host.appId,
          },
          url: "api/common/pd_amp",
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.new_amp_appid = res.data.data.new_amp_appid;
              this.go_new_amp_open = true;
            }
          })
          .catch((err) => { });
      },
      go_new_amp() {
        uni.navigateToMiniProgram({
          appId: this.new_amp_appid,
          path: "", // 不填默认首页
          extraData: {},
          success(res) {
            // 打开成功
          },
          fail(err) { },
        });
      },
      get_general() {
        this.$http({
          data: {
            // #ifdef MP-WEIXIN
            amp_appid: uni.getAppBaseInfo().host.appId,
            // #endif
          },
          url: "api/common/get_general",
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.pop_is_open = res.data.data.is_open_index_pop;
              this.pop_bg = res.data.data.index_pop_bg;
              this.pop_content = res.data.data.is_open_index_pop_content;
              this.appName = app_name;
            }
          })
          .catch((err) => { });
      },
      colrdo() {
        this.aaa += 1;
        if (this.aaa >= this.tongList.length) {
          this.aaa = 0;
        }
        this.$refs.windDom.add({
          item: this.tongList[this.aaa],
        });
      },
      scroll(e) {
        this.old.scrollTop = e.detail.scrollTop;
      },
      openAgree() {
        this.showAgree = true;
      },
      getBanner() {
        this.$http({
          url: "api/common/get_advert",
          data: {
            type: 5,
          },
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.bannerlist = res.data.data;
            }
          })
          .catch((err) => { });
      },
      getAlert() {
        this.$http({
          url: "api/common/get_advert",
          data: {
            type: 6,
          },
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.alertList = res.data.data;
              if (this.alertList.length > 0) {
                this.alertIdx = 0;
                uni.setStorageSync("alertIdx", this.alertIdx);
                this.alertInfo = this.alertList[0];
                // this.showAlert = true;
                this.isShowGg();
              }
              // this.bannerlist = res.data.data;
            }
          })
          .catch((err) => { });
      },
      isShowGg() {
        if (!document.cookie.includes("gg=")) {
          this.setcookie("gg");
          this.showAlert = true;
        } else {
          this.showAlert = false;
        }
      },
      setcookie(str) {
        let d = new Date();
        // d.setTime(d.getTime() + 24 * 60 * 60 * 1000);//24小时
        d.setTime(d.getTime() + 3 * 60 * 60 * 1000); //3小时
        // d.setTime(d.getTime() + 1 * 60 * 1000);//1分钟
        // ad=popup-ad   键值对形式：name=key   expires 有效期
        document.cookie = `${str}=popup-${str};expires= " ${d.toGMTString()}`;
        let result = document.cookie;
        return result;
      },
      /* 关闭盒子触发 */
      closeAlert() {
        this.showAlert = false;
        // #ifdef H5 || APP-PLUS
        if (this.alertIdx < this.alertList.length) {
          setTimeout(() => {
            this.alertIdx += 1;
            uni.setStorageSync("alertIdx", this.alertIdx);
            this.alertInfo = this.alertList[this.alertIdx];
            // this.showAlert = true;
          }, 400);
        }
        // #endif
        // #ifdef MP-WEIXIN
        if (this.alertIdx < this.alertList.length - 1) {
          setTimeout(() => {
            this.alertIdx += 1;
            uni.setStorageSync("alertIdx", this.alertIdx);
            this.alertInfo = this.alertList[this.alertIdx];
            // this.showAlert = true;
          }, 400);
        }
        // #endif
      },
      change(index) {
        this.current = index;
        if (index === 0) {
          this.prizeList = this.allmhBox;
        } else {
          this.swiperCurrentId = this.MangheType[index].id;
          this.loadPrizeList();
        }
      },
      getManghe() {
        // 首页控制开启start
        if (home_control) {
          this.$http({
            url: "api/common/get_xiaofei_count",
            data: {
              uid: uni.getStorageSync("user").id || 0,
            },
          }).then((res) => {
            if (res.data.code == 1) {
              // count限制多少可见 user_count消费多少  isconsumption 是否消费>=1
              const { isconsumption } = res.data.data;
              const isSHowBox = JSON.parse(isconsumption);
              this.$http({
                url: "api/common/get_index_list",
                data: {
                  uid: uni.getStorageSync("user").id || "",
                },
              }).then((res) => {
                // uni.hideLoading();
                if (res.data.code == 1 && isSHowBox) {
                  const { data } = res.data;
                  let xinrenBox = data.splice(0, 2);
                  this.xinrenMhBimaibox = xinrenBox[0];
                  this.maiyisongyiBox = xinrenBox[1];
                  this.allmhBox = data.filter((obj) => obj.box_info !== null);
                }
                if (res.data.code == 1 && !isSHowBox) {
                  const { data } = res.data;
                  const filteredProducts = data.filter(
                    (product) => product.price < 200
                  );
                  let xinrenBox = filteredProducts.splice(0, 2);
                  this.xinrenMhBimaibox = xinrenBox[0];
                  this.maiyisongyiBox = xinrenBox[1];
                  this.allmhBox = filteredProducts.filter(
                    (obj) => obj.box_info !== null
                  );
                }
              });
            }
          });
        } else {
          // 首页控制不开启start
          this.$http({
            url: "api/common/get_index_list",
            data: {
              uid: uni.getStorageSync("user").id || "",
            },
          }).then((res) => {
            // uni.hideLoading();
            if (res.data.code == 1) {
              const { data } = res.data;
              let xinrenBox = data.splice(0, 2);
              this.xinrenMhBimaibox = xinrenBox[0];
              this.maiyisongyiBox = xinrenBox[1];
              this.allmhBox = data;
            }
          });
        }
      },
      //加载奖品列表
      loadPrizeList() {
        // uni.showLoading();
        // if (this.current === 0) {
        // 	this.prizeList = this.allmhBox;
        // 	uni.hideLoading();
        // } else {
        // 	this.$http({
        // 		url: 'api/common/get_blind_box_goods',
        // 		data: {
        // 			blind_box_id: this.swiperCurrentId
        // 		}
        // 	})
        // 		.then((res) => {
        // 			uni.hideLoading();
        // 			if (res.data.code == 1) {
        // 				this.mhImg = res.data.data.blind_box_info.footer_image;
        // 				this.prizeList = res.data.data.goods_list;
        // 				let sortData = res.data.data.goods_list.sort((a, b) => a.goods_pirce - b.goods_pirce);
        // 				this.newPropelBox = sortData[0];
        // 			}
        // 		})
        // 		.catch((err) => {});
        // }
      },
      // 查看盲盒
      lookbox(params, source) {
        // 5新人活动 6买1送1 7免单白嫖 8 一周限定限定
        let id = params.id;
        if (source === 8) {
          /* 今日限定活动需要zid */
          let zid = params.id; // 限定用
          uni.navigateTo({
            url:
              "/pages/home/kaixiang?id=" +
              params.bindboxid +
              "&music=" +
              this.muteBgMusic +
              "&boxSource=" +
              source +
              "&zid=" +
              params.id,
          });
          return false;
        }
        if (source) {
          uni.navigateTo({
            url:
              "/pages/home/kaixiang?id=" +
              id +
              "&music=" +
              this.muteBgMusic +
              "&boxSource=" +
              source,
          });
        } else {
          uni.navigateTo({
            url: "/pages/home/kaixiang?id=" + id + "&music=" + this.muteBgMusic,
          });
        }
      },
      // 前往旧的盒子
      gotoOldHome() {
        uni.switchTab({
          url: "/pages/home/old_home",
        });
      },
      playMusic() {
        this.muteBgMusic = !this.muteBgMusic;
        uni.setStorageSync("muteBgMusic", this.muteBgMusic);
      },
  
      getTong() {
        this.$http({
          url: "api/common/get_blind_box_open_log",
        })
          .then((res) => {
            if (res.data.code == 1) {
              this.tongList = res.data.data;
              this.tongz();
            }
          })
          .catch((err) => { });
      },
      tongz() {
        if (this.tongList.length == 0) {
          return;
        }
        this.tongView = [];
        let arr = this.tongList.map((item) => {
          let obj = {};
          obj.text = `${this.$t('恭喜')} ${item.username} ${this.$t('获得')} ${item.goods_name}`;
          obj.level_name = item.level_name;
          obj.goods_image = item.goods_image;
          obj.bg =
            "https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01KeUqPk2JfEvwQ6LPW_!!2215984279448.png";
          return obj;
        });
  
        //定时显示顶部信息
        let srcData = arr.map((item) => item);
  
        let time = 2500;
  
        let blink = false;
  
        let ctrl = this.initTimer(
          time,
          () => {
            if (!srcData.length) {
              ctrl.stop();
            }
            if (blink) {
              blink = !blink;
              this.tongView.shift();
            } else {
              blink = !blink;
              let one = srcData.shift();
              this.tongView.push(one);
            }
          },
          {
            autoStart: true,
            im: true,
          }
        );
  
        this.tongCtrl = ctrl;
      },
      initTimer(
        t,
        cb,
        opt = {
          autoStart: false,
          im: false,
        }
      ) {
        let pauseFlag = true;
        if (opt.autoStart) {
          pauseFlag = false;
        }
  
        this.tnoTime = setInterval(() => {
          if (!pauseFlag) {
            cb();
          }
        }, t);
        // Ctrl
        return {
          pause: () => {
            pauseFlag = true;
          },
          start: () => {
            if (opt.im) {
              cb();
            }
            pauseFlag = false;
          },
          stop: () => {
            clearInterval(this.tnoTime);
          },
        };
      },
      login(e) {
        if (e.detail.encryptedData) {
          if (this.agreeChecked) {
            let { code, encryptedData, iv } = e.detail;
            this.$http({
              url: "api/login/get_mp_wechat_phone",
              data: {
                code: code,
              },
            })
              .then((result) => {
                if (result.data.code == 1) {
                  this.pnoneNum = result.data.data.phoneNumber;
                  this.weixin();
                }
              })
              .catch((err) => { });
          } else {
            this.$tip.tip(this.$t("请先同意用户协议和隐私协议"));
          }
        } else {
          this.$tip.tip(this.$t("授权失败"));
        }
      },
      bf_anjianyin() {
        return;
        anniumusic.stop();
        anniumusic.play();
      },
      //关闭音乐
      closeMusic() {
        this.$music.playBgm({
          mute: true,
        });
        this.muteBgMusic = true;
        uni.setStorageSync("muteBgMusic", this.muteBgMusic);
      },
      /* 前往每日必领 */
      goDailyLimit() {
        uni.navigateTo({
          url: "/pagesA/pages/my/dailyLimit",
        });
      },
      //获取ip
      getIp() {
        this.$http({
          url: "api/Ios/get_ip",
        })
          .then((res) => {
            if (res.data.code == 1) {
              //res.data.data.ip
              return res.data.data.clear;
            }
          })
          .catch((err) => { });
      },
      /* 初始化七鱼 */
      initSetUserInfo(userInfo) {
        // let userInfo = uni.getStorageSync("user");
        const { id, username, mobile, image, create_time, update_time } =
          userInfo;
        qiyuModule.initSdk({
          appKey: qy_appKey,
          appName: "叮当盲盒",
          pkCerName: "PushKit推送证书名；对应云信的pkCername",
        });
        qiyuModule.setUserInfo(
          {
            userId: id || this.getIp(),
            data: JSON.stringify([
              {
                key: "real_name",
                value: username ? username : '',
              },
              {
                key: "mobile_phone",
                hidden: true,
                value: mobile ? mobile : '',
              },
  
              {
                key: "avatar",
                value: image ? image : 'https://qiyukf.com/def_avatar.png'
              },
              {
                index: 5,
                key: "reg_date",
                label: "注册日期",
                value: create_time ? create_time : '',
              },
              {
                index: 6,
                key: "last_login",
                label: "上次登录时间",
                value: update_time ? update_time : '',
              },
            ]),
          },
          (ret) => {
            if (ret.code == 200) {
              // modal.toast({
              // 	message: '成功',
              // 	duration: 1.5
              // });
            } else {
              // modal.toast({
              // 	message: '失败' + JSON.stringify(ret.errMsg),
              // 	duration: 1.5
              // });
            }
          }
        );
        qiyuModule.updateOptions(
          {
            isPullMessageFromServer: false,
            uiCustomization: {
              hideLeftAvatar: false,
              isShowTitleAvatar: true,
              hideRightAvatar: false,
              inputTextColor: "#ff5500",
            },
          },
          (url) => {
            //点击url的回调
            plus.runtime.openWeb(url);
          }
        );
        qiyuModule.setFinishPageSwitch(true);
        qiyuModule.setPermissionCallback((retCallback) => {
          //麦克风
          let value1 = uni.getStorageSync("is_KEFU_RECORD_AUDIO");
          if (value1 != 1) {
            this.$refs.popupLimits.open();
          }
          plus.android.requestPermissions(
            [
              "android.permission.RECORD_AUDIO",
              "android.permission.MODIFY_AUDIO_SETTINGS",
            ],
            function (e) {
              if (e.deniedAlways.length > 0) {
                //权限被永久拒绝
                // 弹出提示框解释为何需要权限，引导用户打开设置页面开启
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_RECORD_AUDIO", 2);
              }
              if (e.deniedPresent.length > 0) {
                //权限被临时拒绝
                // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_RECORD_AUDIO", 0);
              }
              if (e.granted.length > 0) {
                //权限被允许
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_RECORD_AUDIO", 1);
              }
            },
            function (e) {
              uni.showToast({
                title: "Request Permissions error:" + JSON.stringify(e),
              });
            }
          );
          //相机 相册
          let value2 = uni.getStorageSync("is_KEFU_CAMERA");
          if (value2 != 1) {
            this.$refs.popupLimits.open();
          }
          plus.android.requestPermissions(
            [
              "android.permission.CAMERA",
              "android.permission.READ_EXTERNAL_STORAGE",
            ],
            function (e) {
              if (e.deniedAlways.length > 0) {
                //权限被永久拒绝
                // 弹出提示框解释为何需要权限，引导用户打开设置页面开启
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_CAMERA", 2);
              }
              if (e.deniedPresent.length > 0) {
                //权限被临时拒绝
                // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_CAMERA", 0);
              }
              if (e.granted.length > 0) {
                //权限被允许
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_CAMERA", 1);
              }
            },
            function (e) {
              uni.showToast({
                title: "Request Permissions error:" + JSON.stringify(e),
              });
            }
          );
          //文件存储
          let value3 = uni.getStorageSync("is_KEFU_FILE");
          if (value3 != 1) {
            this.$refs.popupLimits.open();
          }
          plus.android.requestPermissions(
            [
              "android.permission.MANAGE_EXTERNAL_STORAGE",
              "android.permission.WRITE_EXTERNAL_STORAGE",
            ],
            function (e) {
              if (e.deniedAlways.length > 0) {
                //权限被永久拒绝
                // 弹出提示框解释为何需要权限，引导用户打开设置页面开启
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_FILE", 2);
              }
              if (e.deniedPresent.length > 0) {
                //权限被临时拒绝
                // 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_FILE", 0);
              }
              if (e.granted.length > 0) {
                //权限被允许
                this.$refs.popupLimits.close();
                uni.setStorageSync("is_KEFU_FILE", 1);
              }
            },
            function (e) {
              uni.showToast({
                title: "Request Permissions error:" + JSON.stringify(e),
              });
            }
          );
        });
      },
      //企业微信客服
      wxKefu() {
        this.$http({
          url: "api/member/get_weixin_state",
          data: {},
        })
          .then((res) => {
            if (res.data.code == 1) {
              let obj = res.data.data;
              if (obj.weixin_kefu == 1) {
                uni.navigateTo({
                  url: "/pagesA/pages/my/wecom",
                });
              } else {
                this.startQiyu();
              }
            } else {
              this.$tip.tip(res.data.msg);
            }
          })
          .catch((err) => { });
      },
      /* 客服调用 */
      startQiyu() {
        qiyuModule.openServiceActivity({
          title: "官方客服",
          source: {
            title: "官方客服",
            robotId: 5395052,
          },
          openMode: "push",
        });
      },
      popupClcik() {
        this.$refs.popupLimits.close();
        this.startQiyu();
      },
  
      /* 客服接入 */
      openServer() {
        // #ifdef H5
        // #endif
        // #ifdef MP-WEIXIN
        // #endif
        // #ifdef APP-PLUS
        // #endif
      },
      getMessageCount() {
        if (uni.getSystemInfoSync().platform == "ios") {
          modal.toast({
            message: qiyuModule.allUnreadCount(),
            duration: 1.5,
          });
        } else {
          qiyuModule.allUnreadCount((ret) => {
            modal.toast({
              message: "获取未读的客服消息数: " + ret,
              duration: 1.5,
            });
          });
        }
      },
      weixin() {
        uni.login({
          success: (request) => {
            if (request.code) {
              this.$http({
                url: "api/login/mp_wechat_login",
                data: {
                  code: request.code,
                  nickName: this.pnoneNum,
                  share_ma: this.share_ma,
                },
              })
                .then((result) => {
                  if (result.data.code == 1) {
                    uni.setStorageSync("user_token", result.data.data.token);
                    uni.setStorageSync("user", result.data.data.member_data);
                    uni.$emit("updataUser");
                    this.$tip.tip(result.data.msg);
                    this.isLogin = true;
                  } else {
                    this.$tip.tip(result.data.msg);
                  }
                })
                .catch((err) => { });
            }
          },
        });
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .home-page {
    background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/tongbayun11.jpg") no-repeat;
    background-size: 100vw 100%;
    overflow: hidden;
    background-attachment: fixed;
    background-position: center top;
    min-height: 100vh;
    /* #ifdef H5 */
    min-height: calc(100vh - 50px);
    /* #endif */
  }
  </style>
  
  <style lang="scss" scoped>
  @font-face {
    font-family: YouSheBiaTiHei;
    src: url("../../static/font/YouSheBiaTiHei.ttf");
  }
  
  .dailyhave {
    height: 74vh;
    background-color: #b62123;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    overflow: hidden;
    background-image: url("https://img.alicdn.com/imgextra/i2/2215984279448/O1CN016yhFne2JfEvNTahvF_!!2215984279448.png");
    background-repeat: no-repeat;
    background-size: 100% 43vh;
  
    .dailyhave-title {
      height: 200rpx;
      // background-color: pink;
    }
  
    .dailyhave-body-y {
      height: calc(74vh - 200rpx);
      padding-bottom: 30rpx;
      box-sizing: border-box;
    }
  
    .dailyhave-body {
      overflow: hidden;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
  
      .dailyhave-body-0 {
        width: 710rpx;
        height: 270rpx;
        background-color: #fcf1dc;
        margin-top: 40rpx;
        border-radius: 10rpx;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
  
        .dailyhave-body-0-0 {
          width: 100%;
          background: linear-gradient(45deg, #d64525, #ed8e5b);
          width: 300rpx;
          font-size: 26rpx;
          color: #ffffff;
          margin: 8rpx 0 0 8rpx;
          border-top-left-radius: 20rpx;
          border-bottom-right-radius: 20rpx;
          padding: 10rpx 20rpx 10rpx;
        }
  
        .dailyhave-body-0-1 {
          .progress {
            width: 640rpx;
            height: 40rpx;
            background-color: #f9da9f;
            border-radius: 30rpx;
            margin: 0 auto;
            position: relative;
  
            .progress-active {
              width: 200rpx;
              height: 40rpx;
              border-radius: 20rpx;
              background-color: #d64627;
            }
  
            .progress-text {
              color: #ffffff;
              font-size: 24rpx;
              position: absolute;
              z-index: 10;
              top: 5rpx;
              left: 20rpx;
            }
  
            .progress-cj {
              width: 100rpx;
              width: 100rpx;
              position: absolute;
              top: -56rpx;
              right: 230rpx;
  
              image {
                width: 100rpx;
                height: 100rpx;
              }
  
              text {
                padding: 4rpx 20rpx;
                background-color: #eeb4b4;
                color: #ffffff;
                font-size: 20rpx;
                position: relative;
                border-radius: 4rpx;
                overflow: hidden;
                top: -40rpx;
                left: 10rpx;
              }
            }
  
            .progress-cj-2 {
              right: 100rpx;
            }
  
            .progress-cj-3 {
              right: -20rpx;
            }
          }
  
          // margin: 0 auto;
          // height: 100%;
          // background-color: #f9dc8b;
        }
  
        .dailyhave-body-0-2 {
          width: 100%;
          height: 60rpx;
          background-color: #f9dc8b;
          text-align: center;
          background: linear-gradient(#fbecbe, #f3bf53);
          font-size: 30rpx;
          line-height: 60rpx;
          color: #7e2f23;
          font-weight: bold;
        }
      }
  
      .dailyhave-body-1 {
        width: 710rpx;
        margin-top: 30rpx;
      }
  
      .dReward {
        .dReward-title {
          width: 300rpx;
          background-color: #fae8c4;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          color: #8d4436;
          position: relative;
          bottom: -1px;
          font-weight: bold;
          border-top-right-radius: 20rpx;
        }
  
        .dReward-list {
          padding: 20rpx;
          box-sizing: border-box;
          background-color: #fae8c4;
  
          .dReward-list-item {
            margin-top: 20rpx;
            width: 100%;
            height: 170rpx;
            background-color: #fff;
            background-image: url("https://img.alicdn.com/imgextra/i1/2215984279448/O1CN017UdNGy2JfEvSJcbQv_!!2215984279448.png");
            background-size: 100% 100%;
          }
  
          .dReward-list-item:nth-child(1) {
            margin-top: 0rpx;
          }
        }
  
        .dReward-list-item {
          padding: 20rpx;
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          border-radius: 10rpx;
          overflow: hidden;
  
          .d-i-img {
            width: 140rpx;
            height: 140rpx;
            flex-shrink: 0;
            margin-right: 30rpx;
          }
  
          .d-i-content {
            width: 100%;
  
            .d-i-content-0 {
              font-size: 34rpx;
              font-weight: bold;
              color: #7e2f23;
            }
  
            .d-i-content-1 {
              font-size: 22rpx;
              color: #7e2f23;
              font-weight: 300;
              margin-top: 10rpx;
            }
  
            .d-i-content-2 {
              font-size: 22rpx;
              color: red;
              margin-top: 10rpx;
            }
          }
  
          .d-i-status {
            flex-shrink: 0;
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            font-size: 24rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #838b8b;
            background: linear-gradient(45deg, #c1cdcd, #e0eeee);
          }
  
          .d-i-status-active {
            background: linear-gradient(45deg, #d84c2a, #ea8555);
            color: #ffffff;
          }
        }
      }
    }
  }
  
  .position-box {
    position: fixed;
    top: 0;
    z-index: 99;
  
    // height: calc(300rpx + 170rpx);
  }
  
  .top-view {
    padding: 0 20rpx;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
  
    .icon_setUp {
      height: 88rpx;
      flex-shrink: 0;
      width: 100%;
      display: flex;
      align-items: center;
    }
  
    .logoName {
      height: 70rpx;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
  
      .logoName_left {
        font-weight: bold;
        font-size: 34rpx;
        font-style: oblique 16deg;
        // text-stroke: 1px #2c2c2c;
        // -webkit-text-stroke: 1px #2c2c2c;
        font-family: "Microsoft Yahei";
      }
  
      .logoName_right {
        image {
          width: 60rpx;
          height: 50rpx;
        }
  
        .kf-button {
          display: inline;
          background-color: transparent;
          border: none;
          margin: unset;
          padding: unset;
          border-color: transparent;
        }
  
        button::after {
          border: none;
        }
      }
    }
  }
  
  .n-bg {
    position: absolute;
    top: 0;
  }
  
  .banner {
    width: 750rpx;
    height: 280rpx;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
    z-index: 0;
  
    position: relative;
  
    &-box {
      position: absolute;
      height: 280rpx;
      width: 690rpx;
      left: 30rpx;
  
      .swiper {
        height: 280rpx;
      }
    }
  
    image {
      overflow: hidden;
    }
  
    .wind-list {
      position: absolute;
      top: 20rpx;
      width: 750rpx;
      // height: 400rpx;
    }
  }
  
  .nav {
    width: 690rpx;
    height: 170rpx;
    position: absolute;
    left: 30rpx;
    display: flex;
    justify-content: space-between;
  
    &-left,
    &-right {
      width: 330rpx;
      height: 170rpx;
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .tab {
    height: 78rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
  }
  
  .good-list-info {
    height: 160rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  
  .label-name {
    font-size: 30rpx;
    height: 60rpx;
    color: #909399;
  }
  
  /deep/ .xf-tip {
    background-color: rgba(0, 0, 0, 0.9);
    width: 750rpx;
    position: fixed;
    bottom: 200rpx;
    padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
    padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
    left: 0rpx;
    color: #fbeee6;
    display: flex;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    align-items: center;
    z-index: 999999999;
  
    &-bth {
      flex-shrink: 0;
      padding: 20rpx !important;
    }
  }
  
  /deep/ .xf-tip-btn {
    padding: 0rpx 10rpx !important;
    flex-shrink: 0;
    height: 60rpx;
    line-height: 60rpx;
    margin-left: 20rpx;
    font-size: 20rpx;
    border-radius: 30rpx;
    background-color: #9400d3;
    color: #fff;
  }
  
  .agreeText {
    word-wrap: break-word;
    font-size: 20rpx;
  }
  
  .book-style {
    color: #409eff;
  }
  
  @keyframes newBtn {
    0% {
      transform: scale(1);
    }
  
    50% {
      transform: scale(1.1);
    }
  
    100% {
      transform: scale(1);
    }
  }
  
  .tong {
    position: fixed;
    z-index: 9999999999;
    left: 0;
    top: 220rpx;
    width: 750rpx;
    background-size: 100% 100% !important;
    height: 80rpx;
    background-repeat: no-repeat !important;
    /* #ifdef H5 */
    top: 150rpx;
    /* #endif */
  }
  
  .tong .text {
    /* width: 550rpx; */
    padding: 0 30rpx;
    padding-right: 120rpx;
    box-sizing: border-box;
    position: relative;
  }
  
  .tong image {
    position: absolute;
    width: 80rpx;
    right: 50rpx;
    top: 0rpx;
  }
  
  @keyframes barrage {
    0% {
      left: 100%;
      transform: translate3d(0, 0, 0);
    }
  
    50% {
      left: 0;
      transform: translate3d(-100%, 0, 0);
    }
  }
  
  .block {
    position: absolute;
    width: 200rpx;
    animation: barrage 5s linear 0s;
  }
  
  .pop-up-gonggao {
    width: 600rpx;
    height: 900rpx;
  }
  
  .pop-up-gonggao>.pop-up-bg,
  .pop-up-gonggao>.pop-up-bg image {
    // position: absolute;
    width: 100%;
    height: 100%;
  }
  
  .pop-up-gonggao>.pop-content {
    position: absolute;
    z-index: 99;
    top: 220rpx;
    padding: 10rpx 20rpx;
    height: 600rpx;
    overflow: auto;
    overflow-y: scroll;
    word-break: break-all;
  }
  
  .pop-up-gonggao>.pop-content img {
    width: 100%;
  }
  
  .left-music {
    position: fixed;
    left: 0;
    top: 320rpx;
    z-index: 999999;
  
    image {
      width: 100rpx;
      height: 100rpx;
    }
  }
  
  .music {
    animation: music 4s linear 0s infinite normal none;
  }
  
  .price-view-0 {
    height: 50rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    .box-list-right-Zprice {
      margin-top: 10rpx;
      display: flex;
      height: 30rpx;
      box-sizing: border-box;
  
      &-left {
        height: 30rpx;
        width: 100rpx;
        color: #cb5967;
        font-size: 20rpx;
        text-align: center;
        line-height: 30rpx;
        background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/price-bg1.png") no-repeat;
        background-size: 100% 30rpx;
  
        // background: -webkit-linear-gradient(left,#ECE5FD,#F1F7FE,#CDD1FB);
        // background: -webkit-linear-gradient(left,#ef9e59,#cf6463);
        // background: linear-gradient(to #ef9e59 , #cf6463);
      }
  
      &-right {
        width: 200rpx;
        font-size: 18rpx;
        color: #cb5967;
        height: 30rpx;
        width: 140rpx;
        background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/price-bg2.png") no-repeat;
        background-size: 100% 30rpx;
        line-height: 30rpx;
        padding-left: 10rpx;
      }
    }
  
    .price-view-0-right {
      font-size: 26rpx;
      color: #e20014;
      display: flex;
      align-items: flex-end;
  
      text {
        font-size: 20rpx;
        margin-right: 4rpx;
      }
    }
  }
  
  .box-img-0 {
    height: 80rpx;
    width: 100%;
    margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
  
    .box-img-0-view {
      width: 80rpx;
      height: 80rpx;
      background-color: #9400d3;
      // border: 1rpx solid #909399;
      border-radius: 10rpx;
      overflow: hidden;
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  
    .show-more {
      background-color: #fff;
      font-size: 24rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #222;
      background-color: rgba(255, 255, 255, 0.2);
      opacity: 0.9;
      border: 1rpx solid #de8bfb;
      color: #de8bfb;
      font-weight: bold;
    }
  }
  
  .tabView {
    width: 690rpx;
    height: 150rpx;
    margin: 30rpx auto;
    display: flex;
  
    &-0 {
      height: 100%;
      width: 50%;
      flex-shrink: 0;
      background-image: url('../../static/image/enimg/O1CN01Vq8JL02JfEv7Tv3sF___2215984279448.png');
      background-size: 100% 100%;
      overflow: hidden;
  
      &-0 {
        background-color: #fcdcd1;
        box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.2);
        width: 85%;
        margin-top: 82rpx;
        font-size: 22rpx;
        text-align: right;
        color: #9b7c71;
        border-radius: 4rpx;
        margin-left: 12rpx;
        padding-right: 8rpx;
        box-sizing: border-box;
      }
  
      &-1 {
        font-size: 22rpx;
        margin-left: 14rpx;
        color: #dc2d3a;
        margin-top: 10rpx;
      }
    }
  
    &-1 {
      width: 50%;
      flex-shrink: 0;
      height: 100%;
      background-image: url('../../static/image/enimg/O1CN01RNu1Ac2JfEvoeRJea___2215984279448.png');;
      background-size: 100% 100%;
    }
  }
  
  @keyframes music {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }
  
  .flip-box {
    position: relative;
    animation: flip 4s linear infinite;
  
    .front,
    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      backface-visibility: hidden;
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  
    .front {
      z-index: 2;
      transform: rotateY(0deg);
    }
  
    .back {
      transform: rotateY(-180deg);
      z-index: 1;
    }
  }
  
  .card-title {
    height: 46rpx;
    display: flex;
  
    &-0 {
      width: 8rpx;
      height: 100%;
      background-color: #d35264;
    }
  
    &-1 {
      width: 6rpx;
      height: 100%;
      background-color: #d35264;
      margin-left: 6rpx;
    }
  
    &-2 {
      display: flex;
      align-items: flex-end;
      font-size: 38rpx;
      margin-left: 12rpx;
      font-weight: bold;
  
      text {
        font-size: 20rpx;
        color: #ccc;
        margin-left: 10rpx;
        font-weight: 400;
      }
    }
  }
  
  .newView {
    margin: 0 auto;
    width: 690rpx;
    box-sizing: border-box;
  
    .newView-item {
      height: 300rpx;
      width: 690rpx;
      margin-top: 30rpx;
    }
  
    .newView-item-1 {
      image {
        width: 100%;
        height: 100%;
      }
    }
  
    .newView-item-2 {
      background-image: url("https://img.alicdn.com/imgextra/i4/2215984279448/O1CN01B9ru2v2JfEux0jPaQ_!!2215984279448.png");
      background-size: 100% 100%;
      display: flex;
  
      &-left {
        width: 260rpx;
        height: 100%;
        flex-shrink: 0;
  
        image {
          width: 240rpx;
          height: 240rpx;
          margin-top: 10rpx;
          margin-left: 10rpx;
        }
      }
  
      &-right {
        margin-left: 20rpx;
  
        .n-r-0 {
          font-size: 30rpx;
          font-weight: bold;
          display: flex;
          align-items: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 400rpx;
  
          image {
            width: 55rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
  
          margin-top: 20rpx;
        }
  
        .n-r-1 {
          font-size: 22rpx;
          color: #ccc;
          margin-top: 8rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 400rpx;
        }
  
        .n-r-2 {
          width: 380rpx;
          height: 114rpx;
          background-image: url('../../static/image/enimg/O1CN0113cUPR2JfEv9qu5pc___2215984279448.png');
          background-size: 100% 100%;
          margin-top: 40rpx;
          padding-left: 15rpx;
          padding-top: 10rpx;
  
          &-0 {
            font-size: 24rpx;
            color: #562e12;
          }
  
          &-1 {
            font-size: 22rpx;
            margin-top: 8rpx;
            color: #c5b6ab;
          }
  
          .del-text {
            text-decoration: line-through;
            color: #c5b6ab;
          }
        }
      }
    }
  }
  
  .boxList {
    margin: 0 auto;
    width: 690rpx;
    box-sizing: border-box;
    margin-top: 30rpx;
  
    .boxList-item {
      // height: 300rpx;
      padding: 20rpx 0;
      width: 690rpx;
      margin-top: 30rpx;
      background-color: #fff;
      display: flex;
      box-sizing: border-box;
  
      &-left {
        width: 260rpx;
        height: 100%;
        flex-shrink: 0;
  
        image {
          width: 240rpx;
          height: 240rpx;
          margin-top: 10rpx;
          margin-left: 10rpx;
        }
      }
  
      &-right {
        margin-left: 20rpx;
  
        .b-r-0 {
          font-size: 30rpx;
          font-weight: bold;
          align-items: center;
          width: 400rpx;
          // margin-top: 20rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
  
        .b-r-1 {
          font-size: 22rpx;
          color: #ccc;
          margin-top: 2rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 400rpx;
        }
  
        .b-r-2 {
          margin-top: 6rpx;
          font-size: 20rpx;
          color: #d35365;
          height: 30rpx;
  
          view {
            padding: 2rpx;
            display: inline-block;
            border: 1px solid #d35365;
          }
        }
  
        .b-r-3 {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          width: 400rpx;
          margin-top: 4rpx;
  
          .b-r-3-0 {
            font-size: 22rpx;
            color: #ababac;
          }
  
          .b-r-3-1 {
            font-size: 20rpx;
            color: #ababac;
          }
        }
  
        .b-r-4 {
          height: 30rpx;
          border: 1px solid;
          border-image: linear-gradient(to right,
              #f09d58 0%,
              #ec9459 10%,
              #e5815b 50%,
              #dd6c5f 78%,
              #d75b63 100%) 1;
          display: inline-flex;
          align-items: center;
          font-size: 18rpx;
          line-height: 30rpx;
  
          .b-r-4-0 {
            padding: 0 10rpx;
            color: #fff;
            background-image: linear-gradient(to right,
                #f09d58 0%,
                #ec9459 10%,
                #e5815b 50%,
                #dd6c5f 78%,
                #d75b63 100%);
          }
  
          .b-r-4-1 {
            padding: 0 10rpx;
            color: #de8393;
          }
        }
  
        .b-r-5 {
          display: flex;
          margin-top: 10rpx;
  
          image {
            width: 50rpx;
            height: 50rpx;
            margin-right: 20rpx;
          }
        }
      }
    }
  
    .boxList-item-img {
      width: 100%;
      padding: 0rpx;
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  
    .boxList-item-bg {
      padding-top: 100rpx;
      // background-image: url('https://z4a.net/images/2023/10/30/1697804130978.png');
      background-size: 100% 100%;
      position: relative;
  
      .b-b-0 {
        font-size: 38rpx;
        font-weight: bold;
        align-items: center;
        width: 400rpx;
        // margin-top: 20rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-top: 10rpx;
      }
  
      .b-b-1 {
        font-size: 22rpx;
        margin-top: 10rpx;
      }
  
      .b-b-2 {
        margin-top: 14rpx;
  
        .b-b-2-time {
          width: 170rpx;
          height: 36rpx;
          background-image: url("https://z4a.net/images/2023/10/30/1697803776201.png");
          background-size: 100% 100%;
          padding-left: 70rpx;
          color: #fff;
  
          // display: flex;
          // align-items: flex-start;
          .u-count-down-view {
            height: 36rpx;
            display: flex;
            align-items: center;
          }
        }
  
        .b-b-2-price {
          width: 390rpx;
          height: 100rpx;
          background-image: url("https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01sik8vP2JfEvtvt6OK_!!2215984279448.png");
          background-size: 100% 100%;
          padding-left: 14rpx;
  
          .b-r-3-0 {
            font-size: 22rpx;
            color: #ababac;
          }
  
          .b-r-3-1 {
            font-size: 20rpx;
            color: #ababac;
          }
        }
  
        .b-b-2-price-baipiao {
          background-image: url('../../static/image/enimg/O1CN011i0r0R2JfEvh9rrD4___2215984279448.png');
          padding-top: 10rpx;
        }
      }
  
      .dayBox {
        position: absolute;
        left: 20rpx;
        top: 0;
        font-family: YouSheBiaTiHei;
        font-size: 50rpx;
      }
  
      .baipiaoBox {
        position: absolute;
        width: 200rpx;
        right: 20rpx;
        top: 10rpx;
        font-family: YouSheBiaTiHei;
        // background-color: red;
        text-align: center;
        color: #c93d33;
  
        .xiangouBox-0 {
          font-size: 34rpx;
  
          text {
            font-size: 38rpx;
            font-weight: bold;
            padding: 0 4rpx;
            line-height: 38rpx;
            height: 38rpx;
          }
        }
  
        .xiangouBox-1 {
          font-size: 20rpx;
          color: #b27548;
        }
      }
  
      .xiangouBox {
        position: absolute;
        width: 200rpx;
        right: 20rpx;
        top: 20rpx;
        font-family: YouSheBiaTiHei;
        // background-color: red;
        text-align: center;
  
        .xiangouBox-0 {
          font-size: 34rpx;
  
          text {
            font-size: 36rpx;
            font-weight: bold;
          }
        }
  
        .xiangouBox-1 {
          font-size: 20rpx;
        }
      }
    }
  }
  
  .play-btn {
    background: #000;
    border-radius: 18rpx 0 0 18rpx;
    color: #fff;
    font-size: 24rpx;
    right: 0;
    padding: 16rpx 5rpx 16rpx 12rpx;
    position: fixed;
    top: 480rpx;
    writing-mode: vertical-lr;
    z-index: 9999;
  }
  
  .suspended-view {
    height: 140rpx;
    width: 740rpx;
    position: fixed;
    // #ifdef MP-WEIXIN
    bottom: 140rpx;
    //#endif
    //#ifndef MP-WEIXIN
    bottom: 120rpx;
    //#endif
    left: 0rpx;
    z-index: 9999;
    box-sizing: border-box;
  
    // overflow: hidden;
    .widthImg {
      width: 740rpx;
      height: 100rpx;
      margin-top: 46rpx;
    }
  
    .icon-close {
      position: absolute;
      right: 0;
      top: 0rpx;
      width: 40rpx;
      height: 40rpx;
    }
  }
  
  @keyframes flip {
    0% {
      transform: rotateY(0deg);
    }
  
    50% {
      transform: rotateY(180deg);
    }
  
    100% {
      transform: rotateY(0deg);
    }
  }
  
  .flxd-img {
    width: 80rpx;
    height: 80rpx;
    position: fixed;
    left: 10rpx;
    z-index: 99;
  
    image {
      width: 100%;
      height: 100%;
    }
  }
  
  .flxd-img-0 {
    top: 350rpx;
  }
  
  .flxd-img-1 {
    top: 450rpx;
  
    .dot-red {
      background-color: #fa3534;
      display: inline-block;
      height: 36rpx;
      width: 36rpx;
      line-height: 36rpx;
      border-radius: 18rpx;
      // overflow: hidden;
      text-align: center;
      color: #fff;
      font-size: 22rpx;
      position: absolute;
      top: -4rpx;
      right: -4rpx;
    }
  }
  
  .dot-red {
    background-color: #fa3534;
    display: inline-block;
    height: 36rpx;
    width: 36rpx;
    line-height: 36rpx;
    border-radius: 18rpx;
    // overflow: hidden;
    text-align: center;
    color: #fff;
    font-size: 22rpx;
    position: absolute;
    top: -4rpx;
    right: -4rpx;
  }
  
  .flxd-img-2 {
    top: 600rpx;
  
    .dot-red {
      background-color: #fa3534;
      display: inline-block;
      height: 36rpx;
      width: 36rpx;
      line-height: 36rpx;
      border-radius: 18rpx;
      // overflow: hidden;
      text-align: center;
      color: #fff;
      font-size: 22rpx;
      position: absolute;
      top: -4rpx;
      right: -4rpx;
    }
  }
  
  .flxd-img-3 {
    right: 0rpx;
    top: 250rpx;
  }
  
  .newPeopleBox,
  .box11 {
    .newmainBox {
      background: url("../../static/image/enimg/newpeople.png") no-repeat;
      width: 750rpx;
      height: 784rpx;
      background-size: 100%;
      padding-top: 200rpx;
    }
  
    .youhuilist {
      width: 550rpx;
      height: 566rpx;
      margin: 0 auto;
    }
  
    .newmainBox .youhuibox {
      background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/youhui.png") no-repeat;
      background-size: 550rpx 157rpx;
      width: 550rpx;
      height: 157rpx;
      margin: 20rpx auto;
      display: flex;
      justify-content: space-between;
    }
  
    .newmainBox .youhuibox .left {
      display: flex;
      align-items: center;
      color: #255470;
      padding-left: 20rpx;
    }
  
    .newmainBox .youhuibox .left .name {
      font-size: 34rpx;
      margin-bottom: 10rpx;
      color: #255470;
    }
  
    .newmainBox .youhuibox .left .price1 {
      color: #255470;
      font-size: 28rpx;
    }
  
    .newmainBox .youhuibox .left .price1 .pri {
      font-weight: 700;
      font-size: 36rpx;
      color: #255470;
      vertical-align: -6%;
      margin-right: 8rpx;
    }
  
    .newmainBox .youhuibox .right {
      width: 160rpx;
      height: 156rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
  
    .newmainBox .youhuibox .right .ling {
      border-radius: 50rpx;
      width: 120rpx;
      border-radius: 10rpx;
      text-align: center;
      line-height: 45rpx;
    }
  
    .newmainBox .youhuibox .right .active {
      background-color: #60e0e1;
      color: #fff;
    }
  
    .newmainBox .youhuibox .right .yiling {
      background-color: #9d9d9d;
      color: #fff;
    }
  
    .newmainBox .youhuibox .right .price {
      font-size: 28rpx;
      color: #fff;
      margin-bottom: 10rpx;
      font-weight: 700;
    }
  
    .newmainBox .youhuibox .right .price text {
      font-size: 46rpx;
      color: #fff;
    }
  
    .btm-2 {
      width: 750rpx;
      position: relative;
      top: -60rpx;
    }
  
    .btm-2 .btmBg {
      width: 750rpx;
      position: absolute;
      top: 0;
      left: 0;
    }
  
    .btm-2 .btn1 {
      width: 750rpx;
      position: absolute;
      top: 80rpx;
      left: 0;
      text-align: center;
    }
  
    .btm-2 .btn1 image {
      width: 350rpx;
      display: inline-block;
    }
  
    .off {
      text-align: center;
      margin-top: 180rpx;
    }
  
    .off {
      text-align: center;
      margin-top: 140rpx;
    }
  
    .off image,
    .off image,
    .tanBox .off image {
      width: 70rpx;
      height: 70rpx;
      display: inline-block;
    }
  
    .daojubox {
      background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/qo.png") no-repeat;
      background-size: 100%;
      width: 650rpx;
      height: 980rpx;
      padding: 30rpx;
      padding-top: 60rpx;
      box-sizing: border-box;
    }
  
    .daojubox .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    .daojubox .top image {
      width: 350rpx;
    }
  
    .daojubox .rulebox {
      color: #164367;
    }
  
    .daojubox .rulebox .wen {
      border-radius: 50%;
      color: #164367;
      border: 4rpx solid #164367;
      width: 40rpx;
      height: 40rpx;
      line-height: 36rpx;
      text-align: center;
      font-weight: bold;
      display: inline-block;
      margin-right: 10rpx;
    }
  
    .nodata {
      height: 680rpx;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .nodata image {
      width: 340rpx;
      height: 340rpx;
    }
  
    .nodata .tit {
      font-size: 34rpx;
      margin: 20rpx 0;
    }
  
    .nodata .fun {
      font-size: 28rpx;
      color: #999;
    }
  
    .cardList .list {
      background-color: #fff;
      margin-bottom: 20rpx;
      padding: 20rpx;
      box-sizing: border-box;
      width: 100%;
    }
  
    .cardList .list .goods .picbox {
      background-color: #f1f2f6;
      width: 150rpx;
      height: 150rpx;
      padding: 20rpx;
      box-sizing: border-box;
      flex-shrink: 0;
    }
  
    .cardList .list .goods .picbox image {
      width: 100%;
      height: 100%;
    }
  
    .cardList .textbox {
      margin-left: 20rpx;
      width: 100%;
    }
  
    .cardList .textbox .tit {
      font-size: 32rpx;
    }
  
    .cardList .textbox .two {
      font-size: 28rpx;
      margin-top: 10rpx;
    }
  
    .cardList .textbox .qi {
      color: #999;
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  
    .cardList .list .tip1 {
      color: #999;
      font-size: 24rpx;
      margin-top: 10rpx;
      line-height: 1.3;
    }
  
    .explain .tit {
      background-image: linear-gradient(#afc5f3, #94a0e4);
      font-size: 32rpx;
      display: inline-block;
      font-weight: bold;
      padding: 6rpx 15rpx;
      color: #333;
      margin-top: 15rpx;
    }
  
    .explain .tit text {
      margin: 0 10rpx;
    }
  
    .explain .btm {
      /* background-color: #fff; */
      text-align: center;
      padding-top: 30rpx;
    }
  
    .explain .btm .btn2 {
      display: inline-block;
      background-color: #a5b0e1;
      padding: 25rpx 80rpx;
    }
  
    .explain .text {
      color: #999;
      font-size: 24rpx;
    }
  
    .vbox {
      background-color: #fff;
      width: 650rpx;
      padding: 10rpx;
      box-sizing: border-box;
    }
  
    .vbox .v {
      width: 100%;
    }
  
    .vbox .btm {
      padding: 20rpx 0;
    }
  
    .vbox .btm button {
      background-color: #2ceaff;
      width: 50%;
    }
  
    .orderbox {
      background-color: #fff;
      z-index: 999;
    }
  
    .orderbox .tit {
      text-align: center;
      padding: 30rpx 0;
      font-size: 32rpx;
    }
  
    .orderbox .con {
      background-color: #f3f4f8;
      padding: 20rpx;
      box-sizing: border-box;
      min-height: 800rpx;
    }
  
    .orderbox .con .box1 {
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
    }
  
    .orderbox .goods image {
      width: 150rpx;
      height: 150rpx;
      flex-shrink: 0;
    }
  
    .orderbox .goods .info {
      padding-top: 10rpx;
      width: 90%;
      margin-left: 30rpx;
    }
  
    .orderbox .goods .info .t {
      font-size: 34rpx;
    }
  
    .orderbox .goods .info .two {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
    }
  
    .orderbox .goods .info .two .price {
      font-size: 30rpx;
      font-weight: bold;
    }
  
    .orderbox .goods .info .two .num {
      color: #999;
    }
  
    .orderbox .rowitem {
      padding: 20rpx 0;
    }
  
    .orderbox .rowitem image {
      width: 45rpx;
      height: 45rpx;
      margin-right: 10rpx;
    }
  
    .orderbox .rowitem .l {
      display: flex;
      align-items: center;
    }
  
    .orderbox .total {
      border-top: 1rpx solid #e5e5e5;
      text-align: right;
      font-weight: bold;
      padding: 30rpx 0 10rpx;
    }
  
    .orderbox .total text {
      color: #d81e06;
      font-size: 32rpx;
    }
  
    .orderbox .payrow {
      /* width: 670rpx; */
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .orderbox .obtm {
      padding: 20rpx;
      box-sizing: border-box;
      background-color: #fff;
    }
  
    .orderbox .obtm button {
      background-color: #70dde0;
    }
  
    .orderbox .obtm button text {
      font-weight: bold;
    }
  
    .orderbox .xieyi {
      width: 690rpx;
      margin: 0 auto;
      padding: 10rpx 0;
      padding-bottom: calc(constant(safe-area-inset-bottom));
      padding-bottom: calc(env(safe-area-inset-bottom));
    }
  
    .syouhui {
      background-color: #fff;
    }
  
    .youtit {
      padding: 20rpx 0;
      display: flex;
      position: relative;
    }
  
    .youtit .back {
      padding: 0 20rpx;
      position: absolute;
    }
  
    .youtit .youhuit {
      font-size: 34rpx;
      text-align: center;
      width: 100%;
    }
  
    .youhuicon {
      background-color: #f4f8fb;
      /* min-height: 900rpx; */
      padding: 20rpx;
      box-sizing: border-box;
    }
  
    .youhuicon .shitu {
      height: 670rpx;
    }
  
    .youhuicon .shitu .couList {
      display: flex;
      height: 160rpx;
      border-radius: 6rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
    }
  
    .youhuicon .shitu .couList .l {
      flex-shrink: 0;
      width: 160rpx;
      height: 160rpx;
      background-color: #63d7d6;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .youhuicon .shitu .couList .l .aa {
      font-size: 30rpx;
      color: #fff;
    }
  
    .youhuicon .shitu .couList .l .pri {
      font-size: 46rpx;
      color: #fff;
    }
  
    .youhuicon .shitu .couList .l .tiao {
      color: #fff;
      text-align: center;
      font-size: 24rpx;
    }
  
    .youhuicon .shitu .couList .r {
      background-color: #fff;
      width: 100%;
      padding: 20rpx;
      height: 160rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  
    .youhuicon .shitu .couList .r .ll .t {
      font-size: 32rpx;
    }
  
    .youhuicon .shitu .couList .r .use {
      margin: 8rpx 0;
    }
  
    .youhuicon .shitu .couList .r .qi {
      font-size: 24rpx;
      color: #999;
    }
  
    .youhuicon .btn {
      width: 100%;
      text-align: center;
      color: #fff;
      line-height: 80rpx;
      background-color: #63d7d6;
      font-size: 32rpx;
      margin-top: 20rpx;
      border-radius: 6rpx;
    }
  
    .luckbox {
      background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/luckbg.png") no-repeat;
      background-size: 100%;
      border-radius: 24rpx;
      box-sizing: border-box;
      padding: 30rpx;
      width: 650rpx;
      background-color: #fff;
    }
  
    .luckbox .top {
      justify-content: space-between;
      display: flex;
      align-items: center;
    }
  
    .luckbox .titpic {
      width: 50%;
    }
  
    .luckbox .goodsPic {
      width: 45%;
      position: relative;
      /* top: -80rpx; */
    }
  
    .luckbox .option {
      padding: 20rpx 0;
    }
  
    .luckbox .option .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
  
    .luckbox .option .row .chou {
      background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/rx.webp") no-repeat;
      background-size: 100%;
      width: 50%;
      display: flex;
      align-items: center;
      text-align: center;
      height: 124rpx;
      margin: 15rpx 0;
      position: relative;
    }
  
    .jian {
      position: absolute;
      background-color: #ffeae5;
      font-size: 22rpx;
      color: #e54e20;
      padding: 2rpx 20rpx;
      border: 1rpx solid #e6a793;
      border-top-right-radius: 40rpx;
      border-bottom-right-radius: 40rpx;
      top: -20rpx;
      left: 10rpx;
    }
  
    .yuanj {
      font-size: 24rpx;
      color: #077c8b;
      text-decoration: line-through;
      margin-left: 5rpx;
    }
  
    .luckbox .option .row .chou .b {
      width: 100%;
    }
  
    .luckbox .option .row .chou .tit {
      font-size: 32rpx;
      margin-bottom: 6rpx;
    }
  
    .luckbox .option .shi {
      background: url("https://v3mh6.oss-cn-beijing.aliyuncs.com/51api/rw.webp");
      height: 124rpx;
      text-align: center;
      background-size: 100% 124rpx;
      display: flex;
      align-items: center;
      margin-top: 15rpx;
      position: relative;
    }
  
    .luckbox .option .shi .b {
      width: 100%;
    }
  
    .ouhuang {
      background: url("https://xgmh.hui-xiang.cn/assets/img/pk.png") no-repeat;
      background-size: 100%;
    }
  
    .ouhuang .scroll {
      height: 920rpx;
      margin-top: 80rpx;
    }
  
    .ouhuang .scroll .listbox {
      padding: 0 30rpx;
      box-sizing: border-box;
    }
  
    .ouhuang .scroll .listbox .list {
      margin-bottom: 20rpx;
    }
  
    .ouhuang .scroll .listbox .picbox {
      position: relative;
    }
  
    .ouhuang .scroll .listbox .picbox image {
      width: 100%;
      height: 350rpx;
    }
  
    .ouhuang .scroll .listbox .picbox .text {
      padding: 0 20rpx;
      line-height: 80rpx;
      background-color: rgba(255, 255, 255, 0.8);
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  
    .tong {
      position: fixed;
      left: 0;
      top: 220rpx;
      width: 750rpx;
      background-size: 100% 100% !important;
      height: 80rpx;
      background-repeat: no-repeat !important;
      /* #ifdef H5 */
      top: 150rpx;
      /* #endif */
    }
  
    .tong .text {
      /* width: 550rpx; */
      padding: 0 30rpx;
      padding-right: 120rpx;
      box-sizing: border-box;
    }
  
    .tong image {
      position: absolute;
      width: 100rpx;
      right: 50rpx;
      top: -40rpx;
    }
  
    .tong {
      background-color: red;
      width: 100rpx;
      height: 100rpx;
  
      .text-img {
        width: 100rpx !important;
        height: 100rpx !important;
        right: 100rpx;
      }
    }
  
    .tanBox {
      width: 600rpx;
      text-align: center;
    }
  
    .tanBox .pic image {
      width: 100%;
    }
  }
  
  .newPeopleBox_1 {
    .newmainBox {
      background: url("https://img.alicdn.com/imgextra/i2/2215984279448/O1CN01MVlCRG2JfEvqKuuUZ_!!2215984279448.png") no-repeat;
      width: 750rpx;
      height: 784rpx;
      background-size: 100%;
      padding-top: 200rpx;
    }
  }
  
  .DailyhaveDetails-close {
    text-align: right;
    padding-bottom: 30rpx;
  }
  
  .DailyhaveDetails-view {
    width: 660rpx;
    padding-bottom: 80rpx;
    background-image: url("https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01AhbUs22JfEvkZBgAe_!!2215984279448.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  
    .DailyhaveDetails-view-0 {
      width: 540rpx;
      height: 90rpx;
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  
    .DailyhaveDetails-view-youhui {
      margin-top: 30rpx;
      width: 600rpx;
      color: #65381d;
  
      .d-v-y-item {
        height: 160rpx;
        background-color: #fff;
        margin-bottom: 12rpx;
        display: flex;
        justify-content: space-between;
        padding: 0 30rpx;
        box-sizing: border-box;
        align-items: center;
        position: relative;
        border-radius: 8rpx;
        overflow: hidden;
      }
  
      .d-v-y-item-areaa {
        background-color: #e08234;
        position: absolute;
        left: 0;
        top: 0;
        width: 80rpx;
        height: 40rpx;
        font-size: 20rpx;
        text-align: center;
        line-height: 40rpx;
        color: #fff;
      }
  
      .d-v-y-item-left {
        width: 130rpx;
        font-size: 26rpx;
        font-weight: bold;
        flex-shrink: 0;
  
        text {
          font-size: 40rpx;
        }
      }
  
      .d-v-y-item-right {
        width: 100%;
  
        .d-v-y-item-right-0 {
          font-size: 22rpx;
          font-weight: bold;
        }
  
        .d-v-y-item-right-1 {
          font-size: 22rpx;
          font-weight: 400;
          margin-top: 20rpx;
        }
      }
  
      .ccz-View {
        width: 400rpx;
        height: 300rpx;
        margin: 0 auto;
        display: flex;
        align-items: center;
  
        image {
          width: 300rpx;
          height: 300rpx;
        }
  
        text {
          font-size: 68rpx;
          color: #7e2f23;
        }
      }
  
      .ccz-View-text {
        margin-top: 30rpx;
        margin-bottom: 40rpx;
        font-size: 24rpx;
        color: #666;
  
        text {
          color: #ff8f73;
        }
      }
    }
  
    .DailyhaveDetails-no-btn {
      width: 600rpx;
      height: 90rpx;
      background-color: #cfcfcf;
      color: #999;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30rpx;
      border-radius: 6rpx;
      font-weight: bold;
      margin-top: 30rpx;
    }
  
    .DailyhaveDetails-no-btn-active {
      background-color: #e08234;
      color: #fff;
    }
  }
  
  .labei-text {
    font-size: 22rpx;
  }
  
  .tongShowView {
    color: #fff;
    width: 500rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
  
    &-0 {
      font-size: 28rpx;
      color: #f5ebc3;
    }
  
    &-1 {
      padding: 40rpx 0rpx 10rpx;
    }
  
    &-2 {
      // padding: 50rpx 20rpx;
      margin: 0 auto;
      border: none;
      // background-color: rgb(151, 95, 255);
      // box-shadow: 0px 200rpx 200rpx rgb(210, 187, 253) inset, 0rpx 5rpx 200rpx rgba(5, 5, 5, 0.212),
      //   0rpx -200rpx 200rpx rgb(124, 54, 255) inset;
      // border-radius: 10rpx;
      height: 760rpx;
      width: 460rpx;
      background-image: url("https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01eAzQzP2JfEvqLEFqz_!!2215984279448.png");
      background-size: 100% 100%;
      overflow: hidden;
      position: relative;
  
      .tongShowView-2-img {
        position: absolute;
        left: 50%;
        margin-left: -120rpx;
        top: 300rpx;
        width: 240rpx;
        height: 240rpx;
  
        image {
          width: 100%;
          height: 100%;
        }
      }
  
      .tongShowView-2-text {
        position: absolute;
        bottom: 70rpx;
        left: 50%;
        margin-left: -170rpx;
        width: 340rpx;
        font-size: 26rpx;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top: 16rpx;
      }
    }
  
    &-3 {
      width: 420rpx;
      height: 120rpx;
      background-image: url("https://img.alicdn.com/imgextra/i4/2215984279448/O1CN016z7lVj2JfEvuRzFje_!!2215984279448.png");
      background-size: 100% 100%;
      // background-color: #8342ff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 34rpx;
      color: #fff;
      margin-top: 30rpx;
      margin-left: 30rpx;
    }
  }
  
  .del-text {
    text-decoration: line-through;
  }
  
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.8s;
  }
  
  .fade-enter,
  .fade-leave-to
  
  /* .fade-leave-active below version 2.1.8 */
    {
    opacity: 0;
  }
  
  .tong-view {
    height: 80rpx;
    line-height: 80rpx;
    position: fixed;
    // #ifdef MP-WEIXIN
    top: 12.5%;
    //#endif
    //#ifndef MP-WEIXIN
    top: 12.5%;
    //#endif
    width: 100%;
    text-align: center;
    z-index: 99999999;
    background-size: 100% 100%;
  
    .tong-view-text {
      width: 80%;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      margin: 0 auto;
    }
  
    .tong-gd-img {
      width: 100rpx;
      height: 100rpx;
      position: absolute;
      top: -10rpx;
      right: 10rpx;
    }
  
    .text-gd-img {
      height: 60rpx;
      position: absolute;
      top: 26rpx;
      right: 30rpx;
      z-index: 999999999;
      transform: rotate(-8deg);
      font-family: YouSheBiaTiHei;
      color: #a191f3;
      font-size: 50rpx;
      text-shadow: 0.25rem 0.125rem 0.375rem #fff;
      /* #ifdef MP-WEIXIN */
      font-weight: bold;
      text-shadow: 0.375rem 0.125rem 0.375rem #fff;
  
      /* #endif */
      image {
        width: 55rpx;
        height: 35rpx;
      }
  
      // mix-blend-mode: multiply;
    }
  }
  
  .tong-view-ssbg {
    background-image: url("http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240110/6236505eb250653e2d5022ecbbcccec6.png");
  }
  
  .tong-view-csbg {
    background-image: url("http://v3mh6.oss-cn-beijing.aliyuncs.com/uploads/20240110/3e03b47dd44c18741359433429398637.png");
  }
  
  .alertView {
    width: 720rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    .alertView-close {
      display: flex;
      justify-content: flex-end;
      text-align: right;
      width: 620rpx;
    }
  
    .alertView-img {
      width: 620rpx;
      margin-top: 30rpx;
  
      image {
        width: 100%;
      }
    }
  }
  
  .qweqwe {
    background-color: #fff;
    width: 100%;
    color: #000;
    margin-top: 25%;
    padding: 20rpx;
    box-sizing: border-box;
  }
  </style>
  